防止用户在多个下拉列表中选择相同的值
防止用户在多个下拉列表中选择相同的值
提问于 2019-04-16 03:55:33
我正在从API调用中加载表，表行是动态的，并且它基于API调用的返回值。我显示的排序顺序和值应该是唯一的，用户不应该选择以前选择的值。我试着遵循这个(http://jsfiddle.net/jnash21/oqezom4y/)，但我无法实现，因为我的是动态的。
我试过这个(http://embed.plnkr.co/QU4r05n9rQprwyL9Ltxh/)。
editor.controller('EditorController', function($scope) {
$scope.entities = [{name:"pencil",sortOrder:""} ,{name:"notepad",sortOrder:""} ,
{name:"bookshelf",sortOrder:""}
];
$scope.sortOrderValues=[1,2,3];
});
<table>
<tr ng-repeat="x in entities">
<td>{{ x.name }}</td>
<td><select ng-model="x.sortOrder"
ng-options="col for col in sortOrderValues">
</select>
<span ng-show="!x.sortOrder"> * sort order required</span>
</td>
</tr>
</table>如何防止用户使用angular js在每一行中选择相同的排序顺序？
回答 1
Stack Overflow用户
发布于 2019-04-16 08:50:27
此plunker可能会对您有所帮助。
首先，生成一个从1到entities.length的数组(本例中为3)。当您选择一个选项时，触发optionSelected函数。此函数将生成初始数组，并计算entities使用的sortOrders。然后过滤第一个数组中的第二个数组。
HTML
<div ng-controller="EditorController">
<table>
<tr ng-repeat="x in entities">
<td>{{ x.name }}</td>
<td><select ng-model="x.sortOrder"
ng-options="col for col in sortOrderValues"
ng-change="optionSelected()">
</select>
<span ng-show="!x.sortOrder"> * sort order required</span>
</td>
</tr>
</table>
</div>控制器
editor.controller('EditorController', function($scope) {
$scope.entities = [{name:"pencil",sortOrder:""} ,{name:"notepad",sortOrder:""} ,
{name:"bookshelf",sortOrder:""}
];
// Genereate all the numbers between 1 and $scope.entities.length
$scope.sortOrderValues= $scope.entities.map(
function (item, index) {
return index + 1;
}
);
// Function executed when you select a sortOrder
$scope.optionSelected = function () {
// Genereate all the numbers between 1 and $scope.entities.length
var allIndexes = $scope.entities
.map(function (entity, index) { return index + 1; });
// Get all the sortOrder used
var usedIndexes = $scope.entities
.map(function(e) { return e.sortOrder; });
// Remove from the [1, .., $scope.entities.length] array all the sortOrder used
$scope.sortOrderValues = allIndexes
.filter(function (order) {
return !usedIndexes.find(function(index) { return index === order; });
});
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55696379
复制相关文章
相似问题