How to merge 3 drop down menus to one?
Question
I'm pretty new to angular and I'm kind of stuck with an issue. I have a sample example of my problem 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>
I am trying to implement this code in a single drop down menu, rather than 3 menus. With each click showing the selected option.
The overall functionality I am trying is creating a dropdown menu with items. These items when selected will print their names below with a delete button. Upon selecting an item, it should be automatically removed from the dropdown so that it can't be used further. And adding another item should be possible further below (append)
Unfortunately I can't seem to figure out how to get this to work. Can anyone help me out with this ?
2 answers
solution1
2 ACCPTED 2018-02-01 12:55:15
I think this the full implementation of what you have requested. You can change some of the logic and adjust my example appropriately:
<!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>
solution2
1 2018-02-01 12:16:52
You may just add an "multiple" attribute to your first select tag.
<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>
At least this works in the js fiddle, if I understood your problem correctly.
And here you can find, how to limit the multiple select to three answers: HTML Multiselect Limit
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.