关于javascript：AngularJS模板中的三元运算符


Ternary operator in AngularJS templates

如何与你的angularjs三元(在模板)？

这将是很好的HTML属性中使用的一些类(的风格)而创建和调用的功能控制器。

相关讨论

更新：Angular 1.1.5添加了一个三元运算符，因此现在我们可以简单地编写

1
<li ng-class="$first ? 'firstRow' : 'nonFirstRow'">

如果使用的是早期版本的Angular，则有两种选择：

  • (condition && result_if_true || !condition && result_if_false)
  • {true: 'result_if_true', false: 'result_if_false'}[condition]

    • 项目2。上面创建了一个具有两个属性的对象。数组语法用于选择名为true的属性或名为false的属性，并返回关联的值。

    例如。，

    1
    2
    3
    4
    5
    6
    <li class="{{{true: 'myClass1 myClass2', false: ''}[$first]}}">...
    </li>

     or
    <li ng-class="{true: 'myClass1 myClass2', false: ''}[$first]">...
    </li>

    $first在第一个元素的ng repeat中设置为true，因此上面的内容只会在第一次循环中应用类'myclass1'和'myclass2'。

    对于ng类，有一种更简单的方法：ng类采用一个表达式，该表达式必须计算为以下值之一：

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

    • 上面给出了一个1)的例子。下面是3个例子，我认为它读起来更好：

    1
    2
     <li ng-class="{myClass: $first, anotherClass: $index == 2}">...
    </li>

    第一次通过ng重复循环，添加了类myclass。第三次通过($index从0开始)，类anotherclass被添加。

    ng-style接受一个表达式，该表达式的值必须为css-style名称到css值的映射/对象。例如。，

    1
    2
     <li ng-style="{true: {color: 'red'}, false: {}}[$first]">...
    </li>
    相关讨论

    更新：Angular 1.1.5添加了一个三元运算符，此答案仅适用于1.1.5之前的版本。有关1.1.5及更高版本，请参阅当前接受的答案。

    角度1.1.5之前：

    AngularJS中的三元形式是：

    1
    ((condition) && (answer if true) || (answer if false))

    例如：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <ul class="nav">
       
    <li>

            Goals
       
    </li>

       
    <li>

            Groups
       
    </li>


    </ul>

    或：

    1
    2
     <li  ng-disabled="currentPage == 0" ng-click="currentPage=0"  class="{{(currentPage == 0) && 'disabled' || ''}}"> <<
    </li>
    相关讨论

    对于角度模板中的文本(userType是$scope的属性，如$scope.usertype)：

    1
    2
    3
    <span>
      {{userType=='admin' ? 'Edit' : 'Show'}}
    </span>

    到目前为止，我们都发现版本1.1.5在$parse函数中有一个适当的三元，所以只需使用这个答案作为过滤器的例子：

    1
    2
    3
    4
    5
    6
    7
    angular.module('myApp.filters', [])

      .filter('conditional', function() {
        return function(condition, ifTrue, ifFalse) {
          return condition ? ifTrue : ifFalse;
        };
      });

    然后将其用作

    1
    <i ng-class="checked | conditional:'icon-check':'icon-check-empty'">
    相关讨论

    这里是：在1.1.5中向角度分析器添加了三元运算符！查看更改日志

    这里是一个小提琴，显示了在ng类指令中使用的新三元运算符。

    1
    ng-class="boolForTernary ? 'blue' : 'red'"

    虽然您可以在早期版本的Angular中使用condition && if-true-part || if-false-part语法，但通常的三元运算符condition ? true-part : false-part在Angular 1.1.5和更高版本中可用。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
      <body ng-app="app">
      <button type="button" ng-click="showme==true ? !showme :showme;message='Cancel Quiz'"  class="btn btn-default">{{showme==true ? 'Cancel Quiz': 'Take a Quiz'}}</button>
       
          Take Quiz
         

            <button type="button" class="btn btn-default">Start Quiz</button>
         
       
      </body>

    按钮切换和更改按钮标题以及显示/隐藏分区面板。见鬼