如果其他選擇更改，AngularJS將刪除並添加選擇框選項
[英]AngularJS remove & add select box option if other selection changes
問題描述
我正在尋找一個類似的解決方案，解決以前使用以下代碼解決的問題 ：
這是我需要從上面的JSFiddle中使用的JS：
$(document).ready(function () {
$('select.hello').change(function () {
$('select.hello option').attr('disabled', false);
$('select.hello').each(function() {
var val = $(this).find('option:selected').val();
if (!val) return;
$('select.hello option').filter(function() {
return $(this).val() == val;
}).attr('disabled', 'disabled');
});
});
});
但是，我需要在AngularJS中做到這一點，並且作為AngularJS的新手我有點難過如何將一些JS“轉換”成AngularJS Seed而只需要一些指導。
基本上我有3個選擇下拉列表，其中包含相同的列表（這是一個人的列表），當用戶為第一個選擇選擇一個名稱時，我需要從其他2個選擇選項中刪除該名稱。 上面的JSfiddle完美地證明了這一點，但我只需要了解如何將此代碼放入AngularJS中。
提前致謝。
3 個解決方案
解決方案1
8 已采納 2013-02-10 00:13:25
這是一個小提琴，演示了這樣做的一種方式： http ： //jsfiddle.net/Zv5NE/4/它不會像jQuery示例那樣禁用它們，它只是將它們從其他列表中刪除。 如果你想禁用它們，那么（我認為）你需要使用一個指令來正確的角度方式。 您可能還想查看文檔： http ：//docs.angularjs.org/api/ng.directive： select
這是一個片段：
<select
ng-model="selectname1"
ng-options="item as item.name for item in friends|filter:filter2|filter:filter3" >
<option value="">- select -</option>
</select>
<select
ng-model="selectname2"
ng-options="item as item.name for item in friends|filter:filter1|filter:filter3" >
<option value="">- select -</option>
</select>
首先使用ng-model設置select綁定的值。 這告訴模型（在控制器中定義）選擇了什么，它也可以用來設置默認值。 然后使用ng-options指令告訴要顯示的選項以及如何過濾它們。 選項定義為控制器中的數組。 因此，聲明“item as item.name for friends in friends”意味着使用item的值與數組friends中的每個項目的標簽item.name。 選項和過濾器在模型中定義。
在selectname2中，它使用看起來像“friends | filter：filter1”的朋友的過濾器。 filter1是控制器中定義的函數，用於確定要顯示的項目。 對於id與selectname1匹配的任何項，此過濾器只返回false，否則返回true。
function HelloCntl($scope) {
$scope.selectname1={};
$scope.selectname2={};
$scope.selectname3={};
$scope.filter1 = function(item){
return (!($scope.selectname1&&$scope.selectname1.id)||item.id !=$scope.selectname1.id);
};
$scope.filter2 = function(item){
return (!($scope.selectname2&&$scope.selectname2.id)||item.id!=$scope.selectname2.id);
};
$scope.filter3 = function(item){
return (!($scope.selectname3&&$scope.selectname3.id)||item.id !=$scope.selectname3.id);
};
$scope.friends = [
{
id:1,name: 'John',
phone: '555-1276'},
{
id:2,name: 'Mary',
phone: '800-BIG-MARY'},
{
id:3,name: 'Mike',
phone: '555-4321'},
{
id:4,name: 'Adam',
phone: '555-5678'},
{
id:5,name: 'Julie',
phone: '555-8765'}
];
}
希望有所幫助
解決方案2
1 2013-02-10 00:28:23
這是您正在尋找的東西的例子。 根據您的其他選擇自動選擇列表更改。
http://plnkr.co/edit/yFrYQ1ql9a1x9jd9yGv0
您可以推廣n個列表，只需循環遍歷所有更改即可。
<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<h1>Hello {{name}}</h1>
<p>
First List: <select ng-change="onChange()" ng-options='person.name for person in first.list | filter:{selected: false}' ng-model='first.option'><option value="">-- pick one --</option> </select> {{first.option.name}}
</p>
<p>
Second List: <select ng-change="onChange()" ng-options='person.name for person in second.list | filter:{selected: false}' ng-model='second.option'><option value="">-- pick one --</option></select> {{second.option.name}}
</p>
<p>
Third List: <select ng-change="onChange()" ng-options='person.name for person in third.list | filter:{selected: false}' ng-model='third.option'><option value="">-- pick one --</option></select> {{third.option.name}}
</p>
</select>
</body>
</html>
角度代碼
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.masterlist =
[ {name: 'John', selected: false}, {name: 'Bill', selected: false},
{name: 'Smith', selected: false}, {name: 'Alex', selected: false},
{name: 'Martin', selected: false}, {name: 'James', selectes: false}];
$scope.first = {list: angular.copy($scope.masterlist), option: null};
$scope.second = {list: angular.copy($scope.masterlist), option: null};
$scope.third = {list: angular.copy($scope.masterlist), option: null};
$scope.onChange = function(){
$scope.enableAllOptions($scope.first.list);
$scope.enableAllOptions($scope.second.list);
$scope.enableAllOptions($scope.third.list);
$scope.disableOptions($scope.first.list, $scope.second.list, $scope.second.option);
$scope.disableOptions($scope.first.list, $scope.third.list, $scope.third.option);
$scope.disableOptions($scope.second.list, $scope.first.list, $scope.first.option);
$scope.disableOptions($scope.second.list, $scope.third.list, $scope.third.option);
$scope.disableOptions($scope.third.list, $scope.first.list, $scope.first.option);
$scope.disableOptions($scope.third.list, $scope.second.list, $scope.second.option);
};
//Enable all options by default.
$scope.enableAllOptions = function(arr)
{
for(var i=0;i<arr.length;i++)
{
arr[i].selected = false;
}
};
//Function that takes the destinationArr , Source Arry , and Source selected item
$scope.disableOptions = function(destArr, srcArr, srcItem)
{
if(srcItem !== null)
{
var index = srcArr.indexOf(srcItem);
if(index >=0) destArr[index].selected = true;
}
};
});
解決方案3
0 2015-10-23 18:43:44
$scope.filesList = FileService.getFiles();
$scope.listsList = [];
$scope.items = ['settings', 'home', 'other'];
$scope.selection = $scope.items[0];
//esse scope file options mudará depois vou pegar diretamente do banco.
$scope.filesOptions = [
{
'filetype' : 1,
'filelabel' : 'OPÇÃO A',
'selected' : false
},
{
'filetype' : 2,
'filelabel' : 'OPÇÃO B',
'selected' : false
},
{
'filetype' : 3,
'filelabel' : 'OPÇÃO C',
'selected' : false
},
{
'filetype' : 4,
'filelabel' : 'OPÇÃO D',
'selected' : false
},
{
'filetype' : 5,
'filelabel' : 'OPÇÃO E',
'selected' : false
}
];
for (index = 0; index < $scope.filesList.length; ++index) {
$scope.listsList.push({list: angular.copy($scope.filesOptions), option: null});}
$scope.onChange = function(){
//tgt.selected = true;
for (var i = 0; i < $scope.listsList.length; ++i) {
var current = $scope.listsList[i];
$scope.enableAllOptions(current.list);
for (var j = 0; j < $scope.listsList.length; ++j) {
if(current != $scope.listsList[j]){
$scope.disableOptions(current.list, $scope.listsList[j].list, $scope.listsList[j].option);
}
}
}
};
//Enable all options by default.
$scope.enableAllOptions = function(arr){ for(var i=0;i<arr.length;i++){ arr[i].selected = false;} };
//Function that takes the destinationArr , Source Arry , and Source selected item
$scope.disableOptions = function(destArr, srcArr, srcItem) {
if(srcItem !== null) {
var index = srcArr.indexOf(srcItem);
if(index >=0) destArr[index].selected = true;
}
};
<div class="col-md-9"><select ng-change="onChange()" ng-options='op.filelabel for op in listsList[$index].list | filter:{selected: false}' ng-model='listsList[$index].option'>
選一個
如何在選擇其他下拉選項時從 1 個下拉列表中添加/刪除 select 選項
[英]How to Add/Remove select option from 1 drop down on selection of other dropdown option
Ruby on Rails Form 添加帶有文本框的“其他”選項到 Select 下拉列表
[英]Ruby on Rails Form Add an "Other" Option with Text Box to Select Dropdown
當 select 框更改 JavaScript 中的值時，如何添加和刪除消息？
[英]How to add a message and remove it when a select box changes value in JavaScript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.