How can you reset an array with selected values so that the values can be reselected from the dropdown?
I am working with a people array where the values are initially displayed in a select dropdown. When I choose certain names, they get transferred to the multipleDemo array and disappear from the select dropdown. Unfortunately, once selected, these names cannot be chosen again from the dropdown. To solve this issue, I need a Delete button functionality to remove all elements (except the first one) from the multipleDemo array and place them back into the people array. This way, users can once again select any name from the dropdown. There seems to be an error in the function $clearTag.
Expected behavior:
- Select: Wladimir
- Wladimir tag appears
- Try to select Wladimir again (this should not be possible as Wladimir is already selected)
- Click on Delete. The tags stored in the multipleDemo array should be removed and placed back in the people array.
- You can now select Wladimir or any other name again.
Link to code snippet for reference: http://plnkr.co/edit/TPZjXkkSRrIc5ApzP07F?p=preview
index.html
<!DOCTYPE html>
<html lang="en" ng-app="demo">
<head>
<meta charset="utf-8">
<title>AngularJS ui-select</title>;
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">;
<!-- ui-select files -->
<script src="select.js"></script>;
<link rel="stylesheet" href="select.css">;
<script src="demo.js"></script>;
<!-- Select2 theme -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css">;
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css">;
<style>
body {
padding: 15px;
}
.select2 > .select2-choice.ui-select-match {
/* Bootstrap inclusion */
height: 29px;
}
.selectize-control > .selectize-dropdown {
top: 36px;
}
</style>
</head>
<body ng-controller="DemoCtrl">
<h3>Array of strings</h3>
<button ng-click='clearTag()'>Delete</button>;
<ui-select tagging tagging-label="new tag" multiple ng-model="multipleDemo"
on-select="OnClickSelect($item)" on-remove="OnRemoveSelect($item)"
theme="select2" ng-disabled="disabled" style="width: 300px;">
<ui-select-match placeholder="Select name...">{{$item.name}}</ui-select-match>
<ui-select-choices repeat="item in people | filter:$select.search">
{{item.name}}
</ui-select-choices>
</ui-select>
<p>Selected: {{multipleDemo}}</p>;
<hr>;;
</body>;
</html>;
demo.js
app.controller('DemoCtrl', function($scope, $http, $timeout) {
$scope.multipleDemo =[];
$scope.people = [
{ name: 'Adam', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f594919498b59098949c99db969a98"', age...
$scope.OnClickSelect=function(item)
{
$scope.multipleDemo.push(item.name);
};
$scope.OnRemoveSelect = function(item) {
var index = $scope.people.indexOf(item.name);
$scope.people.splice(index, 1);
};
$scope.clearTag = function() {
for(var i =0; i < $scope.multipleDemo.length; i++) {
$scope.multipleDemo.splice($scope.multipleDemo[i], 1000);
$scope.people.push($scope.multipleDemo[i]);
}
};;
})