css - 有条件地申请课程的最佳方式是什么？

Question

假设您有一个数组，该数组在 a 中呈现，每个元素都有ul一个li，控制器上有一个名为selectedIndex. 使用AngularJSli中的索引将类添加到的最佳方法是什么？selectedIndex

我目前正在（手动）复制li代码并将类添加到其中一个li标签中，并使用ng-showandng-hide仅显示li每个索引一个。

Answer 1

如果您不想像我一样将 CSS 类名放入 Controller 中，这是我在 v1 之前使用的一个老技巧。我们可以编写一个直接计算类名selected的表达式，不需要自定义指令：

ng:class="{true:'selected', false:''}[$index==selectedIndex]"

请注意带有冒号的旧语法。

还有一种更好的有条件地应用类的新方法，例如：

ng-class="{selected: $index==selectedIndex}"

Angular 现在支持返回对象的表达式。该对象的每个属性（名称）现在都被视为一个类名，并根据其值应用。

然而，这些方式在功能上并不相同。这是一个例子：

ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]"

因此，我们可以通过基本上将模型属性映射到类名来重用现有的 CSS 类，同时将 CSS 类排除在控制器代码之外。

Answer 2

ng-class支持必须计算为

1. 一串以空格分隔的类名，或
2. 类名数组，或
3. 类名到布尔值的映射/对象。

因此，使用表格 3) 我们可以简单地写

ng-class="{'selected': $index==selectedIndex}"

另请参阅如何在 AngularJS 中有条件地应用 CSS 样式？以获得更广泛的答案。

---

更新：Angular 1.1.5 增加了对三元运算符的支持，所以如果你更熟悉这个结构：

ng-class="($index==selectedIndex) ? 'selected' : ''"

Answer 3

我最喜欢的方法是使用三元表达式。

ng-class="condition ? 'trueClass' : 'falseClass'"

注意：如果你使用的是旧版本的 Angular，你应该改用它，

ng-class="condition && 'trueClass' || 'falseClass'"

Answer 4

我会补充一点，因为其中一些答案似乎已经过时了。这是我的做法：

<class="ng-class:isSelected">

其中“isSelected”是在作用域角度控制器中定义的 javascript 变量。


为了更具体地解决您的问题，您可以使用以下方法生成列表：

HTML

<div ng-controller="ListCtrl">  
    <li class="ng-class:item.isSelected" ng-repeat="item in list">   
       {{item.name}}
    </li>  
</div>

JS

function ListCtrl($scope) {    
    $scope.list = [  
        {"name": "Item 1", "isSelected": "active"},  
        {"name": "Item 2", "isSelected": ""}
    ]
}

见：http: //jsfiddle.net/tTfWM/

请参阅：http ://docs.angularjs.org/api/ng.directive:ngClass

Answer 5

这是一个更简单的解决方案：

function MyControl($scope){
    $scope.values = ["a","b","c","d","e","f"];
    $scope.selectedIndex = -1;
    
    $scope.toggleSelect = function(ind){
        if( ind === $scope.selectedIndex ){
            $scope.selectedIndex = -1;
        } else{
            $scope.selectedIndex = ind;
        }
    }
    
    $scope.getClass = function(ind){
        if( ind === $scope.selectedIndex ){
            return "selected";
        } else{
            return "";
        }
    }
       
    $scope.getButtonLabel = function(ind){
        if( ind === $scope.selectedIndex ){
            return "Deselect";
        } else{
            return "Select";
        }
    }
}

.selected {
    color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app ng-controller="MyControl">
    <ul>
        <li ng-class="getClass($index)" ng-repeat="value in values" >{{value}} <button ng-click="toggleSelect($index)">{{getButtonLabel($index)}}</button></li>
    </ul>
    <p>Selected: {{selectedIndex}}</p>
</div>

Answer 6

我最近遇到了类似的问题，并决定只创建一个条件过滤器：

  angular.module('myFilters', []).
    /**
     * "if" filter
     * Simple filter useful for conditionally applying CSS classes and decouple
     * view from controller 
     */
    filter('if', function() {
      return function(input, value) {
        if (typeof(input) === 'string') {
          input = [input, ''];
        }
        return value? input[0] : input[1];
      };
    });

它接受一个参数，可以是 2 元素数组或字符串，它会变成一个数组，并附加一个空字符串作为第二个元素：

<li ng-repeat="item in products | filter:search | orderBy:orderProp |
  page:pageNum:pageLength" ng-class="'opened'|if:isOpen(item)">
  ...
</li>

Answer 7

如果您想超越二进制评估并将 CSS 排除在控制器之外，您可以实现一个简单的过滤器，根据地图对象评估输入：

angular.module('myApp.filters, [])
  .filter('switch', function () { 
      return function (input, map) {
          return map[input] || '';
      }; 
  });

这使您可以像这样编写标记：

<div ng-class="muppets.star|switch:{'Kermit':'green', 'Miss Piggy': 'pink', 'Animal': 'loud'}">
    ...
</div>

Answer 8

我最近做的就是这样做：

<input type="password"  placeholder="Enter your password"
ng-class="{true: 'form-control isActive', false: 'isNotActive'}[isShowing]">

该isShowing值是位于我的控制器上的值，通过单击按钮进行切换，单括号之间的部分是我在我的 css 文件中创建的类。

编辑：我还想补充一点，codeschool.com 有一个免费的课程，由谷歌在 AngularJS 上赞助，它涵盖了所有这些东西，然后是一些。无需支付任何费用，只需注册一个帐户即可开始！祝大家好运！

Answer 9

三元运算符刚刚在1.1.5中添加到角度解析器中。

所以现在最简单的方法是：

ng:class="($index==selectedIndex)? 'selected' : ''"

Answer 10

我们可以创建一个函数来管理有条件的返回类

<script>
    angular.module('myapp', [])
            .controller('ExampleController', ['$scope', function ($scope) {
                $scope.MyColors = ['It is Red', 'It is Yellow', 'It is Blue', 'It is Green', 'It is Gray'];
                $scope.getClass = function (strValue) {
                    switch(strValue) {
                        case "It is Red":return "Red";break;
                        case "It is Yellow":return "Yellow";break;
                        case "It is Blue":return "Blue";break;
                        case "It is Green":return "Green";break;
                        case "It is Gray":return "Gray";break;
                    }
                }
        }]);
</script>

进而

<body ng-app="myapp" ng-controller="ExampleController">

<h2>AngularJS ng-class if example</h2>
<ul >
    <li ng-repeat="icolor in MyColors" >
        <p ng-class="[getClass(icolor), 'b']">{{icolor}}</p>
    </li>
</ul>
<hr/>
<p>Other way using : ng-class="{'class1' : expression1, 'class2' : expression2,'class3':expression2,...}"</p>
<ul>
    <li ng-repeat="icolor in MyColors">
        <p ng-class="{'Red':icolor=='It is Red','Yellow':icolor=='It is Yellow','Blue':icolor=='It is Blue','Green':icolor=='It is Green','Gray':icolor=='It is Gray'}" class="b">{{icolor}}</p>
    </li>
</ul>

如果示例，您可以参考ng-class的完整代码页

Answer 11

我是 Angular 的新手，但发现这可以解决我的问题：

<i class="icon-download" ng-click="showDetails = ! showDetails" ng-class="{'icon-upload': showDetails}"></i>

这将有条件地应用基于 var 的类。它以默认的图标下载开始，使用 ng-class，我检查showDetailsif的状态true/false并应用类icon-upload。它工作得很好。

希望能帮助到你。

Answer 12

这就像一个魅力;）

<ul class="nav nav-pills" ng-init="selectedType = 'return'">
    <li role="presentation" ng-class="{'active':selectedType === 'return'}"
        ng-click="selectedType = 'return'"><a href="#return">return

    </a></li>
    <li role="presentation" ng-class="{'active':selectedType === 'oneway'}"
        ng-click="selectedType = 'oneway'"><a href="#oneway">oneway
    </a></li>
</ul>

Answer 13

这可能会被遗忘，但这是我使用 1.1.5 的三元运算符根据表中的一行是第一行、中间行还是最后一行来切换类的方式——除非表中只有一行：

<span class="attribute-row" ng-class="(restaurant.Attributes.length === 1) || ($first ? 'attribute-first-row': false || $middle ? 'attribute-middle-row': false || $last ? 'attribute-last-row': false)">
</span>

Answer 14

这是我工作中的多重条件判断：

<li ng-repeat='eOption in exam.examOptions' ng-class="exam.examTitle.ANSWER_COM==exam.examTitle.RIGHT_ANSWER?(eOption.eoSequence==exam.examTitle.ANSWER_COM?'right':''):eOption.eoSequence==exam.examTitle.ANSWER_COM?'wrong':eOption.eoSequence==exam.examTitle.RIGHT_ANSWER?'right':''">
  <strong>{{eOption.eoSequence}}</strong> &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
  <span ng-bind-html="eOption.eoName | to_trusted">2020 元&lt;/span>
</li>

Answer 15

这是另一个在无法使用 ng-class 时效果很好的选项（例如在设置 SVG 样式时）：

ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"

（我认为您需要使用最新的不稳定 Angular 才能使用 ng-attr-，我目前使用的是 1.1.4）

Answer 16

部分的

  <div class="col-md-4 text-right">
      <a ng-class="campaign_range === 'thismonth' ? 'btn btn-blue' :  'btn btn-link'" href="#" ng-click='change_range("thismonth")'>This Month</a>
      <a ng-class="campaign_range === 'all' ? 'btn btn-blue' :  'btn btn-link'" href="#" ng-click='change_range("all")'>All Time</a>
  </div>

控制器

  $scope.campaign_range = "all";
  $scope.change_range = function(range) { 
        if (range === "all")
        {
            $scope.campaign_range = "all"
        }
        else
        {  
            $scope.campaign_range = "thismonth"
        }
  };

Answer 17

好吧，我建议您使用返回true或false的函数检查控制器中的条件。

<div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">{{day.date}}</div>

并在您的控制器中检查条件

$scope.getTodayForHighLight = function(today, date){
return (today == date);
}

Answer 18

检查这个。

臭名昭著的 AngularJSif|else声明！！！
当我开始使用 Angularjs 时，我有点惊讶于找不到 if/else 语句。

所以我正在做一个项目，我注意到在使用 if/else 语句时，加载时会显示条件。你可以使用 ng-cloak 来解决这个问题。

<div class="ng-cloak">
 <p ng-show="statement">Show this line</span>
 <p ng-hide="statement">Show this line instead</span>
</div>

.ng-cloak { display: none }

谢谢阿马杜

Answer 19

如果您使用的是 angular pre v1.1.5 （即没有三元运算符）并且您仍然想要在两种情况下设置值的等效方法，您可以执行以下操作：

ng-class="{'class1':item.isReadOnly == false, 'class2':item.isReadOnly == true}"

Answer 20

如果您有一个应用于许多元素的通用类，您可以创建一个自定义指令，该指令将添加该类，如 ng-show/ng-hide。

如果单击该指令，该指令会将“活动”类添加到按钮

module.directive('ngActive',  ['$animate', function($animate) {
  return function(scope, element, attr) {
    scope.$watch(attr.ngActive, function ngActiveWatchAction(value){
      $animate[value ? 'addClass' : 'removeClass'](element, 'active');
    });
  };
}]);

更多信息

Answer 21

经过大量搜索，今天刚刚添加了一些对我有用的东西......

<div class="form-group" ng-class="{true: 'has-error'}[ctrl.submitted && myForm.myField.$error.required]">

希望这有助于您的成功发展。

=)

未记录的表达式语法：很棒的网站链接... =）

Answer 22

你可以使用这个npm 包。它处理所有事情，并具有基于变量或函数的静态和条件类的选项。

// Support for string arguments
getClassNames('class1', 'class2');

// support for Object
getClassNames({class1: true, class2 : false});

// support for all type of data
getClassNames('class1', 'class2', ['class3', 'class4'], { 
    class5 : function() { return false; },
    class6 : function() { return true; }
});

<div className={getClassNames({class1: true, class2 : false})} />

Answer 23

我理解这个问题 id 是 angular，但如果有人使用 React 或基于 React 的框架（Amplify、NextJS、Serverless 等），解决方案要容易得多。最高效的方法是使用三元运算符，如下所示：

<div className={condition ? "classnameiftrue" : "classnameiffalse"}>

您可以使用此策略为树设置动画，如果useState()每次状态更改时使用 as ，它将使用新值重新加载该条件。