基于另一个数组以角度向 ng-repeat 对象添加类答案

【问题标题】：Add class to ng-repeat object in angular based on another array基于另一个数组以角度向 ng-repeat 对象添加类
【发布时间】：2016-02-03 23:15:15
【问题描述】：

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

基本上，用户可以将项目 ng-repeat 中的对象标记为正确或不正确，这会在判断数组中创建一个“判断”对象。页面加载时，我希望能够比较两个数组以根据对象的最近判断是否不正确或正确来添加/删除一个类。

根据我下面的小提琴，item1 和 item3 应该有一个“不正确”类。我怎么能做到这一点？

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

小提琴：http://jsfiddle.net/bTyAa/2/

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>

【问题讨论】：

标签： javascript arrays angularjs ng-repeat

【解决方案1】：

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

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

【讨论】：

谢谢你，这让我大部分时间都在那里。这种技术有什么办法也可以确保判断是基于日期属性的最新判断？
特定名称的最新版本？你应该只使用sort() 函数
是的，正如您在我的小提琴中看到的那样，item1 被评判了两次。应应用最近的一个。我更改了日期，以便第二次判断具有最近的日期，因此您可以看到jsfiddle.net/bTyAa/7
完美！感谢您的帮助

【解决方案2】：

为什么不在第二个数组上执行 NG-repeat，因为您已经将第一个数组中的信息作为第二个数组中的项目。

并且只使用判断结果作为类？

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>

【讨论】：

这是一种有趣的方法，但不起作用，因为并非所有项目都会被判断，这意味着它们将从数组中丢失。
如果这两个数组来自两个不同的查询，我认为如果您将查询组合成一个数组并返回判断数组中的所有内容，并带有额外的参数或状态正确，不正确，无。我认为这种方法将最大限度地减少客户端的处理和代码

【解决方案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/

【讨论】：