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及其对旧的浏览器垫片。