Select 更新其他选择

Question

我用 ng-repeat 生成了 n 个 selects，当我更改其中一个 select 时，我需要更新其他 selects 中的所有选项].我需要创建一个投票机制。示例：

Init:
- select 1: 1,2,3,4
- select 2: 1,2,3,4
- select 3: 1,2,3,4
- select 4: 1,2,3,4

After change select 1:
- select 1: 2 (selected)
- select 2: 1,3,4
- select 3: 1,3,4
- select 4: 1,3,4

After change select 2:
- select 1: 2 (selected)
- select 2: 4
- select 3: 1,3
- select 4: 1,3
...etc

select的数量是动态的，选项总是显示生成的select的数量

到目前为止我的代码：

<div ng-model="items">
    <div ng-repeat="item in items">
        <select ng-model="selectedPollNum" ng-change="changedPoll(selectedPollNum)">
            <option ng-repeat="option in items">{{ $index + 1 }}</option>
        </select>
        <label>{{item.name}}</label>
    </div>
</div>

jsFiddle: https://jsfiddle.net/gvwpgtj6/2/

还有选项都是空开头的，我想从第一个开始

Answer 1

我认为这将是您的要求。如果您在 select 中默认 select 一个选项，则很难在其他下拉菜单中隐藏默认的 selected 选项。所以建议留空。

控制器：

function LoginController($scope) {
  $scope.arr = [];
  $scope.obj={};
  $scope.items = [{
    name: 'Lorem ipsum dolor sit amet'
  }, {
    name: 'Consectetur adipiscing elit'
  }, {
    name: 'Fusce faucibus turpis eget'
  }, {
    name: 'Sed quis nisl sed ligula'
  }, {
    name: 'Nunc ultricies ipsum vitae'
  }];

  $scope.changedPoll = function(num, i) {
  $scope.obj[i] = num;$scope.arr=[]
    angular.forEach($scope.obj, function(value,key){
    $scope.arr.push(parseInt($scope.obj[key]))
    });
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="LoginController">
  <div ng-model="items">
    <div ng-repeat="item in items">
      <select ng-model="selectedPollNum" ng-change="changedPoll(selectedPollNum, $index)">
        <option ng-repeat="option in items" ng-show='arr.indexOf($index + 1)<0'>{{ $index + 1}}</option>
      </select>
      <label>{{item.name}}</label>
    </div>
  </div>
</div>

Select 更新其他选择

Select updates other selects

angularjs

ng-repeat

angularjs-ng-repeat