ng-repeat中的不同ng模型

时间:2015-06-17 16:52:31

标签: javascript angularjs

我在AngularJS遇到问题! (我对AngularJS很新)

我正在尝试使用x select fields设置n options,我想在ng-model上设置不同的select fields

同时我想要禁用在所有其他select fields的第一个选择字段中选择的选项。

我尝试了几件不同的事情。问题是我无法处理ng-repeat中的不同模型

这是我的JSON文件,使事情更清晰:

[{
  id: 1,
  text: "Question1",
  selected:false
}, {
  id: 2,
  text: "Question2",
  selected:false
}, {
  id: 3,
  text: "Question3",
  selected:false
}, {
  id: 4,
  text: "Question4",
  selected:false
}, {
  id: 5,
  text: "Question5",
  selected:false
}];

This是我的一次尝试。问题是我选择的字段越多,它就越混乱。

我也找到了this,但我无法在示例中解决我的问题。

基本上,我需要的是这样的:

<select ng-change="onChange()" ng-options='q.value for q in questions | filter:{selected:  false}' ng-model='option[$index]'><option value="">-- pick one --</option>  </select>

但由于某种原因,$ index不会被解释为当前索引,而是解释为普通字符串。

1 个答案:

答案 0 :(得分:0)

您可以创建一组问题集。使用ng-repeat,您可以使用相同的初始选项集创建多个下拉列表。

<div ng-repeat="set in questionSets track by set.id">
      <select ng-model="value" ng-options="question.id as question.text for question in set.questions" ng-change="remove($index+1, value);"></select>
    <br><br>
    </div>

使用ng-change,您可以传入问题集的数组索引。然后,您可以从所有其他问题集中删除所选问题。

$scope.remove = function(key, val) {
      _.each($scope.questionSets, function(s) {

          if(s.id !== key) { 
              s.questions = _.reject(s.questions, function(q) {
                return q.id=== val;
              });

          }
      })
  }

这不处理用户在第一个下拉列表中多次更改选择的情况(并且因此从所有其他选项中删除了多个选项),但您可以添加这个一般想法。

http://plnkr.co/edit/XOTGEc8PfvbUTYIZcL7G?p=preview