Display Multiple values selected from dropdown in a List

Question

I have a angularjs function which contain an array of values as follows

$scope.arrayVal = function()
{
var array = [{id:1,name:"one"},{id:2,name:"two"}];
}

I am passing this array to my dropdown which is in the html page and show the values in a dropdown as follows

<html>

<select ng-model="data.selected">
<option value="item.id,item.name" ng-repeat="item in array">{{item.id}} {{item.name}}</option>
</html>

What I want to achieve is I want to make user select multiple values from the dropdown and these selected values should be displayed according to the selected order below the dropdown. How can I achieve this with angularjs and html only. (I am not using any libraries other than angularjs)

score 0 · Accepted Answer · answered Apr 17 '19 at 13:10

Try this plunker https://next.plnkr.co/edit/6Nxaxz9hGNXospyT. You might have to tinker with it to get the outcome you want

<div ng-controller="ctrl">
    <select ng-model="selectedItem" ng-options="item.name for item in items" ng-change="selectItem()">
    </select>
    <p ng-repeat="item in selectedItems">{{item.id}} - {{item.name}}</p>
</div>

angular.module('app', [])

.controller('ctrl', function($scope) {
  $scope.items = [{id:1,name:"one"},{id:2,name:"two"}];
  $scope.selectedItems = [];
  $scope.selectedItem;

  $scope.selectItem = function () {
    var index = $scope.selectedItems.findIndex(function (fItem) { return $scope.selectedItem.id === fItem.id; });
    console.log(index)
    if (index > -1) $scope.selectedItems.splice(index, 1);
    else $scope.selectedItems.push($scope.selectedItem);
  };
});

Display Multiple values selected from dropdown in a List

1 Answers1