Javascript 使用ng repeat根据不同对象的id绑定一个对象数组的值

我有一个选项列表，然后调用一个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匹配正确的id而不重新构建阵列。每当我得到一组新的验证时，我宁愿只更新原始数组上的valid属性。我在想类似于

////////////////在这里，我想做一些类似的事情
有效期：

我将有一个重新验证按钮，它将再次返回验证集，因此理想情况下，我不希望一次又一次地重建此阵列

---

请记住，如果无效，我必须使用ng类在

元素上触发一个类。

一个简单的解决方案是使用另一个

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>

Valid:{validation.Valid}

---

检查演示：

一个简单的解决方案是使用另一个

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>

Valid:{validation.Valid}

---

检查演示：

您的预验证数组和验证数组是否为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>

有效期：

您的预验证数组和验证数组是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>

有效期：

创建一个函数：

$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>

////////////////在这里，我想做一些类似的事情
"V,a,l,i,d:"
有效期：

创建一个函数：

$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>

////////////////在这里，我想做一些类似的事情
"V,a,l,i,d:"
有效期：

在说明中没有提到，但我需要根据选项是否有效应用使用ng类的类，因此下面有另一个ng重复不会将类应用于我的

元素在说明中没有提到，但我需要根据选项是否有效应用使用ng类的类，以便有另一个ng重复下面不会对我的

元素应用类。它们每次都可以以不同的顺序出现。它们每次都可以以不同的顺序出现。