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-repeat：房间里的空间，还有另一个 ng-repeat：action in room.actions 。现在我喜欢在房间名称旁边放置一个标志，其中有一个具有高优先级的动作。但我不知道怎么样，我是AngularJS的初学者。我唯一能想到的是使用ng-model＆amp;纳克级？

<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-class表达式中使用该标志。

评估结果可以是一个字符串，表示空格分隔的类名，数组或类名到布尔值的映射。对于地图，其值为真值的属性的名称将作为css类添加到元素中。

另请参阅 Array.some 及其旧浏览器的垫片。

AngularJS - 检查子数组是否包含某些内容

1 个答案: