关于css：有条件地申请类的最佳方式是什么？


What is the best way to conditionally apply a class?

假设您有一个数组，该数组在ul中呈现，每个元素有一个li，控制器上有一个名为selectedIndex的属性。用AngularJS中的索引selectedIndex向li添加类的最佳方法是什么？

我目前正在(手工)复制li代码，并将类添加到li标记之一，并使用ng-show和ng-hide只显示每个索引一个li。

相关讨论

如果你不想像我一样把CSS类名放到控制器中，这里有一个我从v1前开始使用的老技巧。我们可以编写一个表达式，该表达式直接计算为选定的类名，不需要自定义指令：

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

请注意带冒号的旧语法。

还有一种更好的方法可以有条件地应用类，比如：

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

角度现在支持返回对象的表达式。此对象的每个属性(名称)现在都被视为类名，并根据其值应用。

然而，这些方法在功能上并不平等。下面是一个例子：

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

因此，我们可以重用现有的CSS类，方法是基本上将模型属性映射到类名，同时使CSS类远离控制器代码。

相关讨论

ng类支持的表达式必须计算为

  • 以空格分隔的类名字符串，或
  • 类名数组，或
  • 类名称到布尔值的映射/对象。

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

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

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

    更新：Angular 1.1.5增加了对三元运算符的支持，因此如果您更熟悉该构造：

    1
    ng-class="($index==selectedIndex) ? 'selected' : ''"
    相关讨论

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

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

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

    1
    ng-class="condition && 'trueClass' || 'falseClass'"
    相关讨论

    我再补充一点，因为有些答案似乎过时了。我是这样做的：

    1
    <class="ng-class:isSelected">

    其中"isselected"是在作用域角度控制器中定义的javascript变量。为了更具体地解决您的问题，您可以使用以下方法生成一个列表：

    HTML

    1
    2
    3
    4
        <li class="ng-class:item.isSelected" ng-repeat="item in list">  
           {{item.name}}
       
    </li>

    JS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    function ListCtrl($scope) {    
        $scope.list = [  
            {"name":"Item 1","isSelected":"active
    <div class="    suo-content">[collapse title=""]<ul><li>   differents之间whats ="ng级级和级：item.isselected"="item.isselected".   </li><li>   在使用<wyn>ng-class:className</wyn>好奇与正确使用<wyn>class="{{className}}"</wyn>吗？   </li></ul>[/collapse]</div><p><center>[wp_ad_camp_1]</center></p><hr><P>下面是一个更简单的解决方案：</P><P>[cc lang="css"]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";
            }
        }
    }
    1
    2
    3
    .selected {
        color:red;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js">

       
    <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>

    相关讨论

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
      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元素数组或字符串，将其转换为一个附加了空字符串作为第二个元素的数组：

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

    </li>
    相关讨论

    如果您想超越二进制计算，让您的CSS远离控制器，您可以实现一个简单的过滤器，根据映射对象对输入进行计算：

    1
    2
    3
    4
    5
    6
    angular.module('myApp.filters, [])
      .filter('    switch', function () {
          return function (input, map) {
              return map[input] || '    ';
          };
      });

    这允许您这样编写标记：

    1
        ...
    相关讨论

    我最近做的是这样做：

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

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

    编辑：我还想补充一点，codeschool.com有一个免费的课程，由Google在AngularJS上赞助，涵盖了所有这些东西，还有一些。不需要付钱，只要注册一个账户就可以了！祝大家好运！

    相关讨论

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

    所以最简单的方法是：

    1
    ng:class="($index==selectedIndex)? 'selected' : ''"
    相关讨论

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

    enter image description here

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
        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;
                        }
                    }
            }]);

    然后

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <body ng-app="myapp" ng-controller="ExampleController">

    AngularJS ng-class if example
    <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类中引用完整的代码页

    我刚接触角，但发现这可以解决我的问题：

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

    这将有条件地应用基于var的类。它从默认的图标下载开始，使用ng类，我检查showDetails的状态，如果true/false和应用类图标上载。它工作得很好。

    希望它有帮助。

    这很有魅力；)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <ul class="nav nav-pills" ng-init="selectedType = 'return'">
        <li role="presentation" ng-class="{'active':selectedType === 'return'}"
            ng-click="selectedType = 'return'">return

       
    </li>

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


    </ul>

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

    1
    2
    <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>

    下面是另一个在ng类不能使用时(例如，当为svg设计样式时)工作良好的选项：

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

    (我想你需要在最新的不稳定角上使用ng attr-，我现在在1.1.4上)

    部分的

    1
    2
          This Month
          All Time

    控制器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
      $scope.campaign_range ="all";
      $scope.change_range = function(range) {
            if (range ==="all")
            {
                $scope.campaign_range ="all"
            }
            else
            {  
                $scope.campaign_range ="thismonth"
            }
      };

    我建议你用一个返回真或假的函数来检查控制器中的条件。

    1
    {{day.date}}

    在你的控制器里检查一下情况

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

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

    1
    2
    3
    4
    5
    <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':''">
      {{eOption.eoSequence}} &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
      <span ng-bind-html="eOption.eoName | to_trusted">2020 元</span>

    </li>

    Check
    http://www.codinginsight.com/angularjs-if-else-statement/

    The infamous angularjs if else statement!!! When I started using Angularjs, I was a bit surprised that I couldn’t find an if/else statement.

    So I was working on a project and I noticed that when using the if/else statement, the condition shows while loading.
    You can use ng-cloak to fix this.

    1
    2
     <p ng-show="statement">Show this line</span>
     <p ng-hide="statement">Show this line instead</span>

    .ng-cloak { display: none }

    谢谢阿马杜

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

    如果单击该指令，它将向按钮添加类"active"

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

    更多信息

    只是增加了一些今天对我有用的东西，经过很多的搜索…

    1
     

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

    =)

    未记录的表达式语法：伟大的网站链接…=)

    相关讨论

    如果您使用的是Angular Pre v1.1.5(即无三元运算符)，并且您仍然希望使用等效的方法在这两种情况下设置值，则可以执行以下操作：

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // 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; }
    });