angularjs if語句？

所以我正在運行AngularJS的教程：angularjs if語句？

我有一個在控制器中定義的數組，我通過調用當我通過ng-repeat {{特性循環時返回數組中的不同點。名稱}} {{feature.description}}

我不明白的是讓我說我有一個名爲「重要性」的數組中的第三點，它是從1到10的數字。我不想顯示在HTML中的數字，但我想要做的是應用不同的顏色的功能，如果該數組的「重要性」是10對1

所以我如何寫一個if語句來做到這一點：

即

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

不知道如果這是正確的，但是這就是我想要做的

來源

2012-10-01 btm1

真正IIF：http://stackoverflow.com/questions/14164371/inline-conditionals-in-angular-js/14165488#14165488 – bresleveloper

這第一個是評價的東西是否應該在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'); 
       }); 
      } 
      } 
     }; 
     } 
    }; 
    });

這第二個是，有條件地適用屬性元素指令只一旦沒有手錶聽衆：

即

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

您也可以使用新的NG-如果angularjs添加基本上取代了UI，如果由angularui團隊創建這些將有條件地添加和刪除從DOM的東西，添加監視監聽，以保持評價：

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

來源

2013-10-12 21:16:43 btm1

我不認爲有可用if聲明。爲了您的造型目的，可以使用ng-class。

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

ng-switch也很方便。

- 更新 -

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

angular1.2.0RC似乎NG-如果支持。

來源

2012-10-01 00:43:37 Tosh

啊有道理謝謝。 – btm1

你可以這樣做：'ng-class =「border _ {{4> x}}」'。上述語法不能像寫入一樣工作。 –

嗨，我認爲答案需要更新，看看我的帖子在底部。 –

納克級可能是最好的回答你的問題，但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>

來源

2012-10-02 13:35:17 Jason

您還可以試試下面

這行代碼

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

如果is_foo爲真，則顯示foo.bar。

來源

2013-03-26 20:23:58 houqp

的情況下的優先級將是一個標籤，你可以創建一個開關濾波器納克級的內部使用如在先前的SO回答：https://stackoverflow.com/a/8309832/1036025（交換機過濾代碼）

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

來源

2013-03-27 16:43:12 jpmorin

我認爲答案需要更新。

此前，您可以使用AngularUI項目的ngIf指令（代碼here，如果您仍想下載它），壞消息是它不再被維護。

好消息是，它已被添加到官方AngularJS回購（unstable branch），並很快將在stable one可用。

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

將不只是隱藏DIV元素，但是從DOM中刪除，以及（當事情是falsy）。

來源

2013-08-02 16:27:22

其實還有 Angular 1.2.0中的三元運算符。

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

來源

2013-10-27 19:43:45 wajda

什麼也工作原理是：

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

來源

2015-02-02 16:25:41 ownking

angularjs if語句？

回答

相關問題