Question

我在这里看到示例https://docs.angularjs.org/api/ng/directive/select，这有3个具有相同值的选择，如何在我的选项中选择不同的值？

我有这个：

    <li ng-repeat="tarea in tareas">
      <input type="checkbox" ng-model="tarea.COMPLETADA" ng-change="updTarea(tarea.ID)"/>
      <span class="done-{{tarea.COMPLETADA}}" >{{tarea.NAME}} {{tarea.CLASIFICADORES}}</span>
      <select ng-model="selectedOpt" 
      ng-options="clasificador.NAME for clasificador in clasificadores">
      </select>
      <button class="buttons delete right" ng-click="delTarea(tarea.ID)"> Eliminar</button>
    </li>

所以我可以有5,10,15个选项，我想用tarea.CLASIFICADORES中的值创建一个选定的项目，我试过这个

$scope.selectedOpt = $scope.clasificadores[1]

但是这会使所有选项具有相同的值，例如示例...

如何在我的选项中动态创建不同的所选项目，并在每个项目中使用我的ng-repeat中的值？

我用ajax加载数据......

我的问题是使用tarea.CLASIFICADORES设置默认选定项目。例如，我有一个有分类器的待办事项列表，我希望我的ng-options在页面加载时默认选择我的数据库值clasifier

Answer 1

问题是，您对所有选择使用相同的范围变量。您可以将选定的选项存储在数组中，如下所示：

function TestCtrl($scope) {
  $scope.items = [
    { id: 1, class: 1 },
    { id: 2, class: 2 },
    { id: 3, class: 1 },
  ];
  $scope.classes = [
    { name: "class 1", id: 1},
    { name: "class 2", id: 2},
    { name: "class 3", id: 3}
    ];
  };

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app>
  <div ng-controller="TestCtrl">
    <div ng-repeat="currentItem in items">
      <select ng-model="selectedClass[$index]" ng-init="selectedClass[$index]=(classes|filter:{id: currentItem.class})[0]" ng-options="class.name for class in classes track by class.id" >
      </select>
      selected class: {{selectedClass[$index]}}
    </div>
  </div>
</div>

在这个例子中，我使用变量$ index，它由ng-repeat指令设置。顾名思义它包含了重复循环的当前索引。

<强>更新

我更新了代码段，因此它为每个选择输入设置了默认值。

现在，不同的项目包含一个具有相应类ID的字段。我使用ng-init初始化选择输入。使用此指令，我设置selectedClass[$index]，这是当前项的选定值。因为我们只将class-id作为项的属性，所以我使用过滤器来查找具有id (classes|filter:{id: currentItem.class})[0]

的相应类对象

要摆脱过滤器，您只需将每个项目的类设置为完整的类对象而不是id。

默认选中的项目在角度的几个选项中动态

1 个答案: