AngularJS - 檢查子數組是否包含某些東西

Question

我有一個教室列表，每個教室都有一個子列陣。

{ 
"id": 1, 
"name": "GR302",  
"actions": [ 
    { 
    "date": "19/04/2011",   
    "deadline": "21/04/2011", 
    "priority": "high" 
    }, 
    { 
    "date": "15/01/2012",   
    "deadline": "20/12/2014", 
    "priority": "low" 
    } 
], 

}

我做了一個清單，NG-重複：房間房間，並在那裏另一NG-重複：在room.actions行動。 現在我很想在房間的名字旁放置一個標誌，在那裏有一個高優先級的動作。但我不知道如何，我是AngularJS的初學者。我能想到的唯一的事情是使用ng-model & ng-class？

<h4>{{room.name}} <span class="glyphicon" ng-class="(something) ? 'glyphicon-flag' : ''"></span></h4> 

Answer 1

你能做到這一點在很多不同的方式，ng-class足夠靈活採取一系列表情，對象，數組和字符串。

你可以這樣做： -

ng-class="{'glyphicon-flag' : action.priority == 'high'}" 

或者

<!--More flexible version, Here you can add more key value pairs if you need to specify different classes for different priority--> 
ng-class="{'high' : 'glyphicon-flag'}[action.priority]" 

或者

ng-class="{true, 'glyphicon-flag'}[action.priority == 'high']" 

甚至與表達

ng-class="action.priority == 'high' ? 'glyphicon-flag' : ''" 

---

如果你想要做上述那麼這一層：

在控制器上創建範圍功能：

$scope.isFlagged = function(actions){ 
    if(!angular.isArray(actions)) return false; 

    return actions.some(function(action){ 
     return action.priority === 'high'; 
    }); 
} 

，並在你看來只是做： -

ng-class="{true, 'glyphicon-flag'}[isFlagged(room.actions)]" 

或者如果您的情況下，每個房間的動作數量不會動態變化，那麼您應該在設置房間的視圖模型時在控制器中添加一個屬性，這將更加靈活有效。

例子： -

angular.forEach($scope.rooms , function(room) { 
    room.isFlagged = isFlagged(room.actions); //Add a property on the room object 
}); 

function isFlagged(actions){ 
    if(!angular.isArray(actions)) return false; 

    return actions.some(function(action){ 
     return action.priority === 'high'; 
    }); 
} 

，只是使用在NG-類表達式的標誌。

---

評價的結果可以是代表空間分隔的類名的字符串，陣列，或地圖上的類名到布爾值的。在地圖的情況下，值爲truthy的屬性的名稱將作爲css類添加到元素中。

另見Array.some及其對舊的瀏覽器墊片。