基于另一个数组将 class 添加到 angular 中的 ng-repeat 对象

Question

我正在尝试将 class 添加到 ng-repeat 中的对象，如果该对象（名称）的属性存在于另一个数组中。

基本上，用户可以将项目 ng-repeat 中的对象标记为正确或不正确，这会在判断数组中创建一个 "judgement" 对象。页面的加载，我希望能够根据对象的最近判断是否不正确或正确。

根据我下面的 fiddle，item1 和 item3 的 class 应该是 "incorrect"。我怎样才能做到这一点？

我尝试使用 inArray（请参阅 http://jsfiddle.net/arunpjohny/wnnWu/）但无法弄清楚如何让它使用特定属性而不是整个数组。

function itemCtrl($scope) {
  $scope.items = [{
    itemname: "item1"
  }, {
    itemname: "item2"
  }, {
    itemname: "item3"
  }];
  $scope.judgements = [{
    judgementResult: "incorrect",
    date: "2016-02-01T11:03:16-0500",
    item: {
      itemname: "item1"
    }
  }, {
    judgementResult: "correct",
    date: "2016-01-06T11:03:16-0500",
    item: {
      itemname: "item1"
    }
  }, {
    judgementResult: "incorrect",
    date: "2016-01-04T11:03:16-0500",
    item: {
      itemname: "item3"
    }
  }]
}


<div ng-app>
  <div ng-controller="itemCtrl">
    <ul>
      <li ng-repeat="item in items" class="item"> <span>{{item.itemname}}</span>

      </li>
    </ul>
  </div>
</div>

Answer 1

尝试定义新函数以获得适合您的项目的class

http://jsfiddle.net/bTyAa/8/

$scope.getJudgementsClass = function(itemName) {
    var matched = $scope.judgements.filter(function(el) {
        return el.item.itemname === itemName; 
    }).sort(function(a,b){
        // Turn your strings into dates, and then subtract them
        // to get a value that is either negative, positive, or zero.
        return new Date(b.date) - new Date(a.date);
        });
    if (matched.length == 0)
    {
        return "";
    }
    console.log(itemName);
    return matched[0].judgementResult;
}

Answer 2

为什么不对第二个数组执行 NG 重复，因为您已经将第一个数组中的信息作为第二个数组中的项目。

并且直接使用判断结果作为 class ?

function itemCtrl($scope) {
  $scope.items = [{
    itemname: "item1"
  }, {
    itemname: "item2"
  }, {
    itemname: "item3"
  }];
  $scope.judgements = [{
    judgementResult: "incorrect",
    date: "2016-02-01T11:03:16-0500",
    item: {
      itemname: "item1"
    }
  }, {
    judgementResult: "correct",
    date: "2016-01-06T11:03:16-0500",
    item: {
      itemname: "item1"
    }
  }, {
    judgementResult: "incorrect",
    date: "2016-01-04T11:03:16-0500",
    item: {
      itemname: "item3"
    }
  }]
}

<div ng-app>
  <div ng-controller="itemCtrl">
    <ul>
      <li ng-repeat="obj in judgements" ng-class="obj.judgementResult"> <span>{{obj.item.itemname}}</span>

      </li>
    </ul>
  </div>
</div>

Answer 3

您不能在每次 ng-repeat 迭代时遍历 $scope.judgements 数组。类似于：

$scope.isItemInCorrect =  function(itemname){
    console.log($scope.judgements);
    for(var i = $scope.judgements.length; i--;) {
      if ($scope.judgements[i].item.itemname == itemname 
          && $scope.judgements[i].judgementResult == 'incorrect') {
          return true;
      } 
    }        
}

<li ng-repeat="item in items" ng-class="{'incorrect' : isItemInCorrect(item.itemname)}"  class="item"> <span>{{item.itemname}}</span>

http://jsfiddle.net/n0eb82j3/7/

基于另一个数组将 class 添加到 angular 中的 ng-repeat 对象

Add class to ng-repeat object in angular based on another array

javascript

arrays

angularjs

ng-repeat