Dynamic Dropdown in Angularjs with delete function
Question
I am trying to implement a dynamic dropdown which I intend to look like Image .
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 = '';
}
Clicking on John from the dropdown adds john down below(also stores it in an array) as well as deletes it from the dropdown list. Once it is deleted from below, it is added back to the drop down.
As John Mary Adam and Mike are already below (also in the array), they're deleted from the dropdown (Only Julie now remains in the dropdown). Once they're deleted from below, they're added back to the dropdown. Can anyone help me out with an AngularJS implementation on fiddle?
1 answers
solution1
2 ACCPTED 2018-02-02 09:58:22
I though my answer to your previous question was good enough to edit. You just need ng-repeat to display them all at once. Here is an old example:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <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> <div> <!-- ADD class="alert alert-info" HERE to wrap all boxes with the blue background --> <!-- ng-repeat was added to show all at once --> <!-- ng-show was modified to hide already selected name --> <div ng-repeat="x in friends" ng-show="friends && x!=selected" class="alert alert-info">Name: {{x.name}} | ID: {{x.id}} <button class="btn btn-danger" ng-click="delete(x)">X</button></div> <br> </div> </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>
Update
I have fixed the logic, to meet what you need. Took some time reading your step-by-step process of adding and removing names from both places, but now it's working as intended. Here is a Snippet:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <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-success" ng-click="add(selected)">Add</button> <div> <div ng-repeat="x in selected_friends" ng-show="selected_friends" class="alert alert-info"> Name: {{x.name}} | ID: {{x.id}} <button class="btn btn-danger" ng-click="delete(x)">X</button> <button class="btn btn-success" ng-click="add_back(x)">Add back</button> </div> <br> </div> </div> <script> var app = angular.module('myApp', []); app.controller('HelloCntl', HelloCntl); function HelloCntl($scope) { $scope.selected_friends = []; $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.selected_friends.indexOf(x); $scope.selected_friends.splice(y, 1); } $scope.delete2 = function(x) { var y = $scope.friends.indexOf(x); $scope.friends.splice(y, 1); } var index = 6; $scope.add = function(x) { if ($scope.selected_friends.indexOf(x) == -1) { $scope.delete2(x); $scope.selected_friends.push(x); } } $scope.add_back = function(x) { $scope.delete(x); $scope.friends.push(x); } } </script> </body> </html>
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.