AngularJS ng-repeat и indexOf () для проверки объектов - PullRequest
Новая
       22

AngularJS ng-repeat и indexOf () для проверки объектов

0 голосов
/ 21 июня 2019

У меня есть два объекта 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"}
  ]
};

Полная демонстрация: здесь .

Любая помощь будет оценена.

Ответы [ 2 ]

1 голос
/ 21 июня 2019

Indexof() метод будет искать сходство в ссылках на объекты, а не на сам идентификатор. 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: https://codepen.io/anon/pen/ewgLBN?editors=1010

1 голос
/ 21 июня 2019

Ни один из объектов не будет таким же, потому что 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:

...