AngularJS ng-repeat 和 indexOf() 检查对象

Question

我有两个具有相关信息的 json 对象（data1 和 data2）。也就是说，两个对象都具有属性（数组），而这些属性又可以具有相同的数据。因此，我试图弄清楚如何通过正确突出显示这些数据来显示它们，即相同的数据具有绿色，而不同的数据具有红色。它以某种方式错误地用红色突出显示了所有数据。

这是html：

<ul>
  <li ng-repeat="item in vm.data2.features"
      ng-class="vm.data1.features.indexOf(item) !== -1 ? 'check' : 'uncheck'">
    <span ng-bind="item.id"></span>
  </li>
</ul>

和对象：

vm.data1 = {
  id: '4569',
  name: 'Given data',
  features: [
    {id: "TEST_TEXT2", desc: 'smth12'},
    {id: "TEST_PPP", desc: 'smthsmthsmth'},
    {id: "TEST_ECASH", desc: "somelongtexthere"}
  ]
};

vm.data2 = {
  id: '1305',
  name: 'Base data',
  features: [
    {id: "TEST_BP", desc: 'smth'},
    {id: "TEST_TEXT2", desc: 'smth12'},
    {id: "TEST_PPP", desc: 'smthsmthsmth'},
    {id: "TEST_TEXT1", desc: 'blahblah'},
    {id: "TEST_ECASH", desc: "somelongtexthere"}
  ]
};

完整的演示是 here。

如有任何帮助，我们将不胜感激。

Answer 1

None 个对象将相同，因为 indexOf(item) 将比较 item 的对象引用。您需要对项目进行深度相等比较。

即

{id: "TEST_TEXT2", desc: 'smth12'} === {id: "TEST_TEXT2", desc: 'smth12'} // false
vm.data1.features[0] === vm.data1.features[1] // false

使用 lodash 的示例如下：

_.some(vm.data1.features, otherItem => _.isEqual(item, otherItem))

因为

_.isEqual(vm.data1.features[0], vm.data2.features[1]) // true

Lodash 文档：

Answer 2

Indexof() 方法将查找对象引用中的相似性而不是 id 本身。 findIndex() 这里的方法可以帮到你。

vm.hasFeature = function(item){
var hasElements= vm.data1.features.findIndex(function(e){
  return e.id == item.id;
});
 console.log(item, hasElements);
 return hasElements;
}

并在 html

<li ng-repeat="item in vm.data2.features"
    ng-class="vm.hasFeature(item) > -1 ? 'check' : 'uncheck'">

vm.hasFeature = function(item){
   var hasElements= vm.data1.features.findIndex(function(e){
      return e.id == item.id;
    });
    console.log(item, hasElements);
    return hasElements;
}

CodePen Link: https://codepen.io/anon/pen/ewgLBN?editors=1010

AngularJS ng-repeat 和 indexOf() 检查对象

AngularJS ng-repeat and indexOf() to check objects

arrays

angularjs

angularjs-ng-repeat