如何在不更新所有 select 的情况下 select 具有多个重复 select 的选项？

Question

我有多个 select 标签，每个标签都使用 ng-options。它们都显示在相同的项目数组中。但是，当我 select 一项时，所有 select 都会更新为该项目。有什么办法可以避免这种情况吗？

<select ng-model="selectedClass" ng-options="className as className for className in classes track">
        <option value="" disabled selected>Select Class</option>
</select>
<select ng-model="selectedClass" ng-options="className as className for className in classes track">
        <option value="" disabled selected>Select Class</option>
</select>
<select ng-model="selectedClass" ng-options="className as className for className in classes track">
        <option value="" disabled selected>Select Class</option>
</select>

Answer 1

所有 select 都在更新，因为它们都引用相同的 ng-model。

如果每个select应该是独立的，他们必须使用不同的模型：

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.classes = ['A', 'B', 'C'];
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl">

  <!--selectedClass1-->
  <select ng-model="selectedClass1" ng-options="className as className for className in classes">
    <option value="" disabled selected>Select Class</option>
  </select>

  <!--selectedClass2-->
  <select ng-model="selectedClass2" ng-options="className as className for className in classes">
    <option value="" disabled selected>Select Class</option>
  </select>

  <!--selectedClass3-->
  <select ng-model="selectedClass3" ng-options="className as className for className in classes">
    <option value="" disabled selected>Select Class</option>
  </select>
  
  <div>selectedClass1: {{selectedClass1}}</div>
  <div>selectedClass2: {{selectedClass2}}</div>
  <div>selectedClass3: {{selectedClass3}}</div>
</div>

如果您使用的是指令，则可以将模型传递到指令的隔离范围内：

angular.module('myApp', [])
  .controller('MyCtrl', ['$scope', MyCtrl])
  .directive('mySelect', mySelect)

function MyCtrl($scope) {
  $scope.selections = [];

  $scope.classes = ['A', 'B', 'C'];

  $scope.addSelect = function() {
    $scope.selections.push({
      selectedClass: null
    });
  };

  $scope.removeSelect = function(index) {
    $scope.selections.splice(index, 1);
  }
}

function mySelect() {
  return {
    restrict: 'E',
    scope: {
      selection: '=',
      classes: '='
    },
    template: '<select' +
      ' ng-model="selection.selectedClass"' +
      ' ng-options="className as className for className in classes">' +
      '<option value="" disabled selected>Select Class</option>' +
      '</select>'
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl">

  <div ng-repeat="selection in selections">
    <my-select selection="selection" classes="classes"></my-select>
    <button ng-click="removeSelect($index)">Remove</button>
  </div>

  <button ng-click="addSelect()">Add a select</button>

  <div>selections: {{selections}}</div>
</div>

如何在不更新所有 select 的情况下 select 具有多个重复 select 的选项？

How to select an option with multiple duplicate selects without updating all the selects?

angularjs

angularjs-directive

angularjs-scope