AngularJS if 语句？

Question

所以我正在浏览 AngularJS 教程：

我在控制器中定义了一个数组，当我循环 ng-repeat {{feature.name}} {{feature.description}} 时，我通过调用返回数组中的不同点

我不明白的是，假设数组中有第三个点，称为“重要性”，它是一个从 1 到 10 的数字。我不想在 html 中显示该数字，但我想做的是，如果数组中的“重要性”数字是 10 vs 1，则对该功能应用不同的颜色

那么我该如何编写 if 语句来执行此操作：

IE。

<p style="**insert if statement: {{if feature.importance == 10}} color:red; {{/if}} **">{{feature.description}}</p>

不知道这是否正确，但这就是我想做的

Answer 1

第一个是一个指令，评估某些东西是否应该在DOM中只有一次，并且没有向页面添加观看侦听器：

angular.module('setIf',[]).directive('setIf',function () {
    return {
      transclude: 'element',
      priority: 1000,
      terminal: true,
      restrict: 'A',
      compile: function (element, attr, linker) {
        return function (scope, iterStartElement, attr) {
          if(attr.waitFor) {
            var wait = scope.$watch(attr.waitFor,function(nv,ov){
              if(nv) {
                build();
                wait();
              }
            });
          } else {
            build();
          }

          function build() {
            iterStartElement[0].doNotMove = true;
            var expression = attr.setIf;
            var value = scope.$eval(expression);
            if (value) {
              linker(scope, function (clone) {
                iterStartElement.after(clone);
                clone.removeAttr('set-if');
                clone.removeAttr('wait-for');
              });
            }
          }
        };
      }
    };
  });

.

第二个是一个指令，它根据观察侦听器只有一次将属性应用于元素：

i.e.

<div set-attr="{ data-id : post.id, data-name : { value : post.name, condition : post.name != 'FOO' } }"></div>

angular.module('setAttr',[]).directive('setAttr', function() {
  return {
    restrict: 'A',
    priority: 100,
    link: function(scope,elem,attrs) {
      if(attrs.setAttr.indexOf('{') != -1 && attrs.setAttr.indexOf('}') != -1) {
      //you could just angular.isObject(scope.$eval(attrs.setAttr)) for the above but I needed it this way
        var data = scope.$eval(attrs.setAttr);

        angular.forEach(data, function(v,k){

          if(angular.isObject(v)) {
            if(v.value && v.condition) {
                elem.attr(k,v.value);
                elem.removeAttr('set-attr');
            }
          } else {
            elem.attr(k,v);
            elem.removeAttr('set-attr');
          }
        });
      }
    }
  }
});

. 当然，您可以使用内置成角度的动态版本：

<div ng-class="{ 'myclass' : item.iscool }"></div>

.

您还可以使用new ng-如果由AngularJS添加，基本上取代了UI - 如果由AngularUI团队创建这些，这些将有条件地添加和删除DOM的东西，并添加观看侦听器以保持评估：

<div ng-if="item.iscool"></div>

.

Answer 2

我不认为有 if 可用声明。为了您的造型目的， ng-class 可以使用。

<p ng-class="{important: feature.importance == 10 }">

ng-switch 也方便。

- 更新 -

看一眼：https://stackoverflow.com/a/18021855/1238847

angular1.2.0RC 似乎有 ng-if 支持。

Answer 3

实际上在角度1.2.0中有一个三元算子。

<p style="{{feature.importance == 10 ? 'color:red' : ''}}">{{feature.description}}</p>

.

Answer 4

我认为答案需要更新。

以前，您可以使用angularui项目的NGIF指令（代码这里如果你仍然想下载它），坏消息是它不再维持了。

好消息是它已被添加到官方AngularJS repo（不稳定的分支），很快将在稳定一个。

<div ng-if="something"> Foo bar </div>

.

不仅仅隐藏生成的DIV元素，还可以从dom中删除它（当某些东西是falsy时）。

Answer 5

ng-class可能是您问题的最佳答案，但Angularui有一个“如果”指令：

http://angular-ui.github.com/

搜索： 从DOM中删除元素完全而不是只是隐藏它。

我使用“ui-if”来决定我是否应该将数据值呈现为标签或输入，相对于当前月份：

<tbody id="allocationTableBody">
    <tr ng-repeat="a in data.allocations">
        <td>{{a.monthAbrv}}</td>
        <td ui-if="$index < currentMonth">{{a.amounts[0]}}</td>
    </tr>
</tbody>

.

Answer 6

在您的优先级将是标签的情况下，您可以创建一个开关过滤器以在NG类内部使用，如前一个答案所示： https://stackoverflow.com/a/8309832/1036025 （适用于交换机码码）

<p ng-class="feature.importance|switch:{'Urgent':'red', 'Warning': 'orange', 'Normal': 'green'}">...</p>

.

Answer 7

您也可以尝试以下代码行

<div class="{{is_foo && foo.bar}}">

.

显示foo.bar如果是ar_foo是真的。

Answer 8

还有什么工作：

<span>{{ varWithValue || 'If empty use this string' }}</span> 

.