我挖了几个小时而没有找到我想做的答案。我正在处理一个包含大量变量的复杂表单,因此我将尝试在此处缩小我的请求:)
var list = [{id:0, name:opt0}, {id:1, name:opt1},{id:2, name:opt2}];
var selected = ['opt1', 'opt2'];
var numberOfRows = 2;
我根据变量得到了一个可变数量的select。所以我像这样使用ng-repeat:
<tr ng-repeat="i in numberOfRows track by $index">
<td>
<select list.indexOf(selected[$index]) as item for item in list></select>
</td>
</tr>
结果应该是这样的
<tr><td>
<select>
<option label="opt0" value="opt0"></option>
<option label="opt1" value="opt1" selected="selected"></option>
<option label="opt2" value="opt2"></option>
</select>
</tr></td>
<tr><td>
<select>
<option label="opt0" value="opt0"></option>
<option label="opt1" value="opt1"></option>
<option label="opt2" value="opt2" selected="selected"></option>
</select>
</tr></td>
我尝试了很多方法来编写ng-option。 我实际上是正确的选择数与每个选项内的列表,但每个选择应具有不同的预选变量。并且它们都在我列表的最后一个值中被选中。无论我尝试什么。
ps:我的数组'selected'中的值总是在[$ index] .name
列表中如果有人知道如何实现,我将非常高兴^^
...
小方请求:是否可以在列表中执行过滤器,该过滤器将通过所有选择删除/隐藏所选选项? 结果如下:
<tr><td>
<select>
<option label="opt0" value="opt0"></option>
<option label="opt1" value="opt1" selected="selected"></option>
//opt2 removed because it's selected in another select
</select>
</tr></td>
<tr><td>
<select>
<option label="opt0" value="opt0"></option>
//opt1 removed because it's selected in the previous select
<option label="opt2" value="opt2" selected="selected"></option>
</select>
</tr></td>
谢谢:)
答案 0 :(得分:0)
我在第一部分尝试了您现有的解决方案,但我不知道您是如何设法使这一行代码工作的:
<tr ng-repeat="i in numberOfRows track by $index">
所以我根据你想要的输出做了我自己的版本,使用$scope.selected
作为ng-model数组,你可以看到我正在改变你的$scope.selected
,使其值为{{1这是[{id:1, name:'opt1'},{id:2, name:'opt2'}]
的完整对象预选值。
['opt1', 'opt2']
你标记:
$scope.list = [{id:0, name:'opt0'}, {id:1, name:'opt1'},{id:2, name:'opt2'}];
$scope.selected = ['opt1', 'opt2'];
$scope.selectModels = [];
var newSelected = [];
angular.forEach($scope.selected, function(value, key) {
this.push($filter("filter")($scope.list, {name: value})[0]);
}, newSelected);
$scope.selectModels = newSelected;
如果您为每一行生成不同的<tr ng-repeat="i in selected">
<td>
<select ng-model="selectModels[$index]" ng-options="option.name for option in list track by option.id" class="form-control"></select>
{{ selectModels[$index] }}
</td>
</tr>
,或者对该行使用list
,我认为您可以提出问题。
这是有效的jsfiddle希望这会有所帮助。您可以设置旁边请求的新问题。