Angular JS multiple select unable to get the value selected

Question

I am trying to populate a multiple select option using Angular JS . This is my List

 var depositoryList =[  
{  
  "depos":"Any",
  "deposName":"Any"
},
{  
  "depos":"DUB",
  "deposName":"DUBAI"
},
{  
  "depos":"MUM",
  "deposName":"MUMBAI"
},
{  
  "depos":"SNG",
  "deposName":"SINGAPORE"
}],
// didnt Work
 $scope.depositoryId = {value:{depos:'Any'}}

This is how i populate it in HTML

 <select multiple 
ng-model="depositoryId.value" 
data-ng-options="obj.depos + ' - ' + obj.deposName for obj in depositoryList track by obj.depos">
</select>

1)I tried to set default value to Any and i am not able set them .

2) I tried to get the selected value and did alert($scope.depositoryId.value.depos) . Its giving me an undefined alert message

where am i going wrong

nivas · Accepted Answer · 2017-02-17 22:52:11Z

1

Final Edit:

Show Any- Any without any break and get selected values in ng-model

var app = angular.module('myApp', []);

app.controller('MainCtrl', function ($scope) {
  $scope.depositoryId = ['Any'];
   $scope.depositoryList =[  
{  
  "depos":"Any",
  "deposName":"Any"
},
{  
  "depos":"DUB",
  "deposName":"DUBAI"
},
{  
  "depos":"MUM",
  "deposName":"MUMBAI"
},
{  
  "depos":"SNG",
  "deposName":"SINGAPORE"
}];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="myApp">
  <head></head>
  <body ng-controller="MainCtrl">
    <select multiple="true" ng-model="depositoryId" ng-options="obj.depos as (obj.depos + ' - ' +obj.deposName) for obj in depositoryList">
</select>
<div>{{depositoryId}}</div>
  </body>
</html>

edited Feb 17, 2017 at 22:52

answered Feb 17, 2017 at 21:31

nivas

3,1963 gold badges19 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Praveen Over a year ago

I am able to display the list , i want the first value [Any] to be selected by default . I am also trying to retrieve the value back in controller

Praveen Over a year ago

tried this first itself , also tried now. It didnt work :(

nivas Over a year ago

did you changed ng-options as i did and what you got the ng-model once you selected, {{depositoryId.value}} put this somewhere in your html code it will print the value as you select

Praveen Over a year ago

If i change ng-options as you did , my dropdown is fully added with values sucha as Nan . I want my dropdown to be displaying like this Any-Any

Praveen Over a year ago

I am trying to do multiple select dropdown . I have already implemented single select dropdown

|

Jax · Accepted Answer · 2017-02-17 23:09:35Z

1

For a more elegant solution without hardcoding the initial value, since you have the string needed in your array, you could do:

<select multiple='true' ng-init="depositoryInitialValue = depositoryList[0].deposName" 
                        ng-model="depositoryInitialValue" 
                        ng-options="obj.depos as (obj.depos + ' - ' + obj.deposName) for obj  in depositoryList">

</select>

See plunkr here

hope it helps.

var app = angular.module('ngApp', []);

app.controller('MainCtrl', ['$scope', function($scope) {
  'use strict';

  $scope.depositoryList = [{
    "depos": "Any",
    "deposName": "Any"
  }, {
    "depos": "DUB",
    "deposName": "DUBAI"
  }, {
    "depos": "MUM",
    "deposName": "MUMBAI"
  }, {
    "depos": "SNG",
    "deposName": "SINGAPORE"
  }]


}]);

<!DOCTYPE html>
<html ng-app="ngApp">

<head lang="en">
  <meta charset="utf-8">
  <title>maxisam's ngApp</title>
  <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/css/bootstrap-combined.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
</head>

<body ng-controller="MainCtrl" class="container">
  <br/>

  <select multiple='true' ng-init="depositoryInitialValue = depositoryList[0].deposName" ng-model="depositoryInitialValue" ng-options="obj.depos as (obj.depos + ' - ' + obj.deposName) for obj  in depositoryList">
  </select>
  <br /> {{depositoryInitialValue}}
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
  <script src="app.js"></script>
</body>

</html>

edited Feb 17, 2017 at 23:09

answered Feb 17, 2017 at 22:07

Jax

1,8373 gold badges18 silver badges30 bronze badges

6 Comments

Praveen Over a year ago

I am trying to implement a multiple select dropdown

Jax Over a year ago

My bad, missed that requirement, that is fixed in the plunkr now

Praveen Over a year ago

When i try to display it as key- value pair it breaks automatically eg : Any-Any, MUM-MUMBAI

Jax Over a year ago

I don't get what you say, also displaying k-v pairs is part of the requirement in your post?

Praveen Over a year ago

yes , please have a look obj.depos + ' - ' + obj.deposName . This will display in k-v (Any - Any)

|

Collectives™ on Stack Overflow

Angular JS multiple select unable to get the value selected

2 Answers 2

9 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related