Привязать значение из одного массива объектов на основе идентификатора из другого с помощью ng-repeat

Question

У меня есть список параметров, а затем я вызываю API, который проверяет эти параметры.Я планирую показать, является ли опция действительной или нет.Я начинаю с этого массива

$scope.preValidationArray = [
  { id: 1, description: 'Item 1' },
  { id: 2, description: 'Item 2' },
  { id: 3, description: 'Item 3' },
];

и получаю следующий ответ

$scope.validations = [
  { id: 1, valid: true },
  { id: 2, valid: false },
  { id: 3, valid: false },
];

, как я могу использовать ng-repeat, чтобы сопоставить правильный идентификатор и НЕ перестраивать массив снова.Я бы предпочел просто обновить действительное свойство исходного массива всякий раз, когда я получаю новый набор проверок.Я думаю о чем-то вроде <div ng-bind="validations.valid on option.id">

<ul id="options">
   <li ng-repeat="option in preValidationArray track by option.id"
       ng-class="{'invalid': !option.valid}">
      <div ng-bind="option.description"></div>
      //////////////// Here I want to do something like
      Valid: <div ng-bind="validations.valid on option.id">
   </li>
</ul>

У меня будет кнопка Revalidate, которая будет возвращать набор проверок снова, поэтому в идеале я не хочу перестраивать этот массив снова иснова и снова.

Имейте в виду, я должен вызвать класс на элементе <li>, используя ng-class, если он недействителен.

Answer 1

Являются ли ваши preValidationArray и проверочные массивы 1: 1?То есть, если предварительная проверка имеет 15 элементов, проверяет ли она также (и соответствуют ли проверки [0] элементу preValidationArray [0] и т. Д.)?Если это так, вы могли бы отслеживать индекс и быть в безопасности в этом случае.Имея это в виду, вы можете попробовать что-то вроде этого:

<ul id="options">
    <ng-repeat="option in preValidationArray track by $index">
        <ng-bind="option.description"></div>
        Valid: <div ng-bind="validations[$index].valid">
    </li>
</ul>

Answer 2

Создайте функцию:

$scope.validById = function(id) {
    return $scope.validations.find(_ => _.id == id).valid;
};

И используйте ее:

<ul id="options">
   <li ng-repeat="option in preValidationArray track by option.id"
       ng-class="{'invalid': !validById(option.id)}">
      <div ng-bind="option.description"></div>
      //////////////// Here I want to do something like
      ̶V̶a̶l̶i̶d̶:̶ ̶<̶d̶i̶v̶ ̶n̶g̶-̶b̶i̶n̶d̶=̶"̶v̶a̶l̶i̶d̶a̶t̶i̶o̶n̶s̶.̶v̶a̶l̶i̶d̶ ̶o̶n̶ ̶o̶p̶t̶i̶o̶n̶.̶i̶d̶"̶>̶
      Valid: <div ng-bind="validById(option.id)"></div>
   </li>
</ul>

Answer 3

Одно простое решение будет использовать другое ng-repeat для проверки:

<ul id="options">
    <li ng-repeat="option in preValidationArray track by option.id">
        <div ng-bind="option.description"></div>

        Valid: <div ng-repeat="validation in validations | filter:{id:option.id} track by validation.id">{{validation.valid}}</div>
    </li>
</ul>

Проверьте демо: DEMO