选择更新其他选择

时间:2016-05-11 08:57:56

标签: angularjs angularjs-ng-repeat ng-repeat

我有n次选择使用ng-repeat生成,当我更改其中一个选项时,我需要更新其他选项中的所有选项。我需要创建一个投票机制。例如:

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

选择的数量是动态的,选项总是显示生成的选择的数量

到目前为止我的代码:

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

此外,选项以空开头,我想从第一个开始

1 个答案:

答案 0 :(得分:2)

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

<强>控制器:

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>