如何將3個下拉菜單合並為一個？
[英]How to merge 3 drop down menus to one?
問題描述
我對角度很新，我有點陷入困境。 我有一個問題jsfiddle的示例
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'},
{
id:2,name: 'Mary'},
{
id:3,name: 'Mike'},
{
id:4,name: 'Adam'},
{
id:5,name: 'Julie'}
];
}
<div ng:app>
<div ng-controller="HelloCntl">
<ul>
<li ng-repeat="friend in friends | filter:{name:'!Adam'}">
<span>{{friend.name}}</span>
</li>
</ul>
<select ng-model="selectname1"
ng-options="item as item.name for item in friends|filter:filter2|filter:filter3" ><option value="">- select - </option></select>
<div>{{selectname1}}</div>
<select ng-model="selectname2"
ng-options="item as item.name for item in friends|filter:filter1|filter:filter3" ><option value="">- select -</option></select>
<div>{{selectname2}}</div>
<select ng-model="selectname3" ng-options="item as item.name for item in friends|filter:filter1|filter:filter2" ><option value="">- select -</option></select>
<div>{{selectname3}}</div>
</div>
</div>
我試圖在一個下拉菜單中實現此代碼，而不是3個菜單。 每次單擊都會顯示所選選項。
我正在嘗試的整體功能是創建一個包含項目的下拉菜單。 選擇這些項目后，將使用刪除按鈕在下面打印其名稱。 選擇項目后，應自動從下拉列表中刪除該項目，以使其無法進一步使用。 並且可以在下面進一步添加另一個項目（追加）
不幸的是，我似乎無法弄清楚如何讓這個工作。 任何人都可以幫我解決這個問題嗎？
2 個解決方案
解決方案1
2 已采納 2018-02-01 12:55:15
我認為這是你所要求的全面實施。 您可以更改一些邏輯並適當調整我的示例：
<!DOCTYPE html> <html> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <script srt="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script> <body> <div ng-app="myApp" ng-controller="HelloCntl"> <div ng-controller="HelloCntl"> <select ng-model="selected" ng-options="i as i.name for i in friends"></select> <button class="btn btn-danger" ng-click="delete(selected)">X</button> <div ng-show="selected" class="alert alert-info">Name: {{selected.name}} | ID: {{selected.id}}</div> <br> <input ng-model="new_selected"> <button class="btn btn-info" ng-click="add(new_selected)">Add</button> </div> <script> var app = angular.module('myApp', []); app.controller('HelloCntl', HelloCntl); function HelloCntl($scope) { $scope.friends = [ {id:1,name: 'John'}, {id:2,name: 'Mary'}, {id:3,name: 'Mike'}, {id:4,name: 'Adam'}, {id:5,name: 'Julie'} ]; $scope.selected = $scope.friends[0]; // initialise selection $scope.delete = function(x) { var y = $scope.friends.indexOf(x); $scope.friends.splice(y, 1); } var index = 6; $scope.add = function(x) { $scope.friends.push({ id: index, name: x }); index++; $scope.new_selected = ''; } } </script> </body> </html>
解決方案2
1 2018-02-01 12:16:52
您可以在第一個選擇標記中添加“多個”屬性。
<select ng-model="selectname1" multiple
ng-options="item as item.name for item in friends|filter:filter2|filter:filter3" ><option value="">- select -</option></select>
<div>{{selectname1}}</div>
如果我正確理解你的問題，至少這在js小提琴中起作用。
在這里你可以找到，如何將多個選擇限制為三個答案： HTML Multiselect Limit
如何使下拉菜單正確打開？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.