英文:
Filter select options based on previous selections
问题
以下是您提供的代码的翻译部分：
我在AngularJS中有一系列具有预定义值列表的动态选择选项。
基本上，当有人在第一个选择下拉菜单中选择一个值时，我想将其从其余的下拉菜单中移除。
<body ng-app="myNgApp">
<div ng-controller="myController">
<input type="button" value="Add group" ng-if="availableGroups < allGroups.length" ng-click="addGroup()" />
<input type="button" value="Remove group" ng-click="removeGroup()" />
<div ng-repeat="group in [].constructor(availableGroups) track by $index">
<select ng-model="selectedGroups_[$index]" ng-options="col for col in allGroups"></select>
</div>
</div>
</body>
var ngApp = angular.module('myNgApp', []);
ngApp.controller('myController', function($scope) {
$scope.allGroups = ['group 1', 'group 2', 'group 3', 'group 4', 'group 5'];
$scope.availableGroups = 0;
$scope.addGroup = function() {
$scope.availableGroups += 1;
}
$scope.removeGroup = function($index) {
$scope.availableGroups -= 1;
}
});
您可以在这里找到JSFiddle链接。
我尝试创建一个名为selectedOptions的数组，并使用ng-change将值推送或移除到该数组中。然后，使用它来过滤所有的select元素。然而，当我将值推送到数组中时，显然它会从已选择的那个中移除。
英文:
I have a dynamic number of select options in AngularJS with a predefined list of values.
Essentially, when someone choose one value on the 1st select dropdown, I want to remove it from the rest of the dropdown lists.
<body ng-app="myNgApp">
<div ng-controller="myController">
<input type="button" value="Add group" ng-if="availableGroups < allGroups.length" ng-click="addGroup()" />
<input type="button" value="Remove group" ng-click="removeGroup()" />
<div ng-repeat="group in [].constructor(availableGroups) track by $index">
<select ng-model="selectedGroups_[$index]" ng-options="col for col in allGroups"></select>
</div>
</div>
</body>
var ngApp = angular.module('myNgApp', []);
ngApp.controller('myController', function($scope) {
$scope.allGroups = ['group 1', 'group 2', 'group 3', 'group 4', 'group 5'];
$scope.availableGroups = 0;
$scope.addGroup = function() {
$scope.availableGroups += 1;
}
$scope.removeGroup = function($index) {
$scope.availableGroups -= 1;
}
});
You can find the JSFiddle here
What I tried to do is to create an array selectedOptions and with an ng-change, push or remove the value to that array. Then use it to filter all select elements. However, the moment I push the value to the array, it is obviously removed from the one that got selected.
答案1
得分: 1
I think while removing also your array needs to be updated right? by replacing the removed selected option, so I have implemented that too here you can check this code or else I will attach my jsfiddle link here jsFiddle
var ngApp = angular.module('myNgApp', []);
ngApp.controller('myController', function($scope) {
$scope.allGroups = ['group 1', 'group 2', 'group 3', 'group 4', 'group 5'];
$scope.availableGroups = 0;
$scope.selectedOptionsList = [];
$scope.addGroup = function() {
$scope.availableGroups += 1;
};
$scope.removeGroup = function() {
$scope.availableGroups -= 1;
$scope.selectedOptionsList.pop();
};
$scope.neededSelectableOptions = function(index) {
var selectedValues = $scope.selectedOptionsList.filter(function(value, i) {
return i !== index && value !== null && value !== undefined;
});
return $scope.allGroups.filter(function(group) {
return !selectedValues.includes(group);
});
};
});
<body ng-app="myNgApp">
<div ng-controller="myController">
<input type="button" value="Add group" ng-if="availableGroups < allGroups.length" ng-click="addGroup()" />
<input type="button" value="Remove group" ng-click="removeGroup()" />
<div ng-repeat="group in [].constructor(availableGroups) track by $index">
<select ng-model="selectedOptionsList[$index]" ng-options="col for col in neededSelectableOptions($index)"></select>
</div>
</div>
</body>
英文:
I think while removing also your array needs to be updated right? by replacing the removed selected option, so I have implemented that too here you can check this code or else I will attach my jsfiddle link here jsFiddle
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var ngApp = angular.module('myNgApp', []);
ngApp.controller('myController', function($scope) {
$scope.allGroups = ['group 1', 'group 2', 'group 3', 'group 4', 'group 5'];
$scope.availableGroups = 0;
$scope.selectedOptionsList = [];
$scope.addGroup = function() {
$scope.availableGroups += 1;
};
$scope.removeGroup = function() {
$scope.availableGroups -= 1;
$scope.selectedOptionsList.pop();
};
$scope.neededSelectableOptions = function(index) {
var selectedValues = $scope.selectedOptionsList.filter(function(value, i) {
return i !== index && value !== null && value !== undefined;
});
return $scope.allGroups.filter(function(group) {
return !selectedValues.includes(group);
});
};
});
<!-- language: lang-html -->
<body ng-app="myNgApp">
<div ng-controller="myController">
<input type="button" value="Add group" ng-if="availableGroups < allGroups.length" ng-click="addGroup()" />
<input type="button" value="Remove group" ng-click="removeGroup()" />
<div ng-repeat="group in [].constructor(availableGroups) track by $index">
<select ng-model="selectedOptionsList[$index]" ng-options="col for col in neededSelectableOptions($index)"></select>
</div>
</div>
</body>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论