0

I am trying to use ng-options for displaying multiple values in the drop down.

When displaying only one value, it works fine but not when displaying multiple values.

Here is my code.. http://tpcg.io/QrjgXN

Controller: 

app.controller('listController', function() {
    var vm = this;
    vm.gradeList = [{
        grade: 1,
        category: 'very poor'
    },
    {
        grade: 2,
        category: 'poor'
    },
    {
        grade: 3,
        category: 'average'
    },
    {
        grade: 4,
        category: 'good'
    },
    {
        grade: 5,
        category: 'very good'
    }];
    vm.gradeSelected = vm.gradeList[0].grade;
});

HTML:

<select multiple class="form-control"
  ng-selected="vm.gradeSelected"
  ng-model="vm.gradeSelected"
  ng-options="gradeObj.grade + ' (' + gradeObj.category + ')' for gradeObj in vm.gradeList">
</select>

What else is missing?

georgeawg
  • 48,608
  • 13
  • 72
  • 95
Pranjal Successena
  • 907
  • 1
  • 11
  • 24
  • The code you posted seems to work fine. What is the code that doesn't work? What are you doing, what do you expect to happen, and what happens instead? Be more precise than just "it doesn't work". – JB Nizet Jul 22 '18 at 12:29
  • @JBNizet i guess OP is asking about the blank option – Sajeetharan Jul 22 '18 at 13:05

2 Answers2

0

When selecting multiple items, the model needs to be initialized to an array:

<select multiple class="form-control"
    ̶n̶g̶-̶s̶e̶l̶e̶c̶t̶e̶d̶=̶"̶v̶m̶.̶g̶r̶a̶d̶e̶S̶e̶l̶e̶c̶t̶e̶d̶"̶
    ng-model="vm.gradeSelected"
    ng-options="gradeObj.grade as vm.desc(gradeObj) for gradeObj in vm.gradeList">
</select>

̶v̶m̶.̶g̶r̶a̶d̶e̶S̶e̶l̶e̶c̶t̶e̶d̶ ̶=̶ ̶v̶m̶.̶g̶r̶a̶d̶e̶L̶i̶s̶t̶[̶0̶]̶.̶g̶r̶a̶d̶e̶;̶
vm.gradeSelected = [vm.gradeList[0].grade];
vm.desc = item => item.grade + ' (' + item.category + ')';

The DEMO

angular.module("app",[])
.controller('ctrl', function() {
    var vm = this;
    vm.gradeList = [{
        grade: 1,
        category: 'very poor'
    },
    {
        grade: 2,
        category: 'poor'
    },
    {
        grade: 3,
        category: 'average'
    },
    {
        grade: 4,
        category: 'good'
    },
    {
        grade: 5,
        category: 'very good'
    }];
    vm.gradeSelected = [vm.gradeList[0].grade];
    vm.desc = item => item.grade + ' (' + item.category + ')';
});
select {
  height: 100px;
}
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl as vm">
    <select multiple class="form-control"
            ng-model="vm.gradeSelected"
            ng-options="gradeObj.grade as vm.desc(gradeObj) for gradeObj in vm.gradeList">
    </select>
    <br>
    gradeSelected = {{vm.gradeSelected}}
</body>

Also the ng-selected directive does not work with ng-model, see

UPDATE

if I remove the multiple attribute, the demo does not work

If you remove the multiple attribute, don't initialize with an array:

<select ̶m̶u̶l̶t̶i̶p̶l̶e̶ class="form-control"
    ng-model="vm.gradeSelected"
    ng-options="gradeObj.grade as vm.desc(gradeObj) for gradeObj in vm.gradeList">
</select>

̶v̶m̶.̶g̶r̶a̶d̶e̶S̶e̶l̶e̶c̶t̶e̶d̶ ̶=̶ ̶[̶v̶m̶.̶g̶r̶a̶d̶e̶L̶i̶s̶t̶[̶0̶]̶.̶g̶r̶a̶d̶e̶]̶;̶
vm.gradeSelected = vm.gradeList[0].grade;
vm.desc = item => item.grade + ' (' + item.category + ')';

With the multiple attribute, the ng-model takes and returns an array; without, a single value.

From the Docs:

multiple (optional)

Allows multiple options to be selected. The selected values will be bound to the model as an array.

— AngularJS <select> Directive API Reference

georgeawg
  • 48,608
  • 13
  • 72
  • 95
0

You can just change your select tag as below to be able to display the selected value.

<select class="form-control"
        ng-model="vm.gradeSelected">
        <option ng-repeat="gradeObj in vm.gradeList" ng-selected="vm.gradeSelected" ng-value="{{gradeObj.grade}}"> {{gradeObj.grade}} - {{gradeObj.category}}</option>
</select>

DEMO 

 var app = angular.module('myApp', []);
      app.controller('listController', function() {
          var vm = this;
          vm.gradeList = [{
              grade: 1,
              category: 'very poor'
          },
          {
              grade: 2,
              category: 'poor'
          },
          {
              grade: 3,
              category: 'average'
          },
          {
              grade: 4,
              category: 'good'
          },
          {
              grade: 5,
              category: 'very good'
          }];
          vm.gradeSelected = vm.gradeList[0].grade;
      });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="listController as vm">
  <select class="form-control" ng-model="vm.gradeSelected">
    <option ng-repeat="gradeObj in vm.gradeList" ng-selected="vm.gradeSelected" ng-value="{{gradeObj.grade}}"> {{gradeObj.grade}} - {{gradeObj.category}}</option>
  </select>
</div>
Anil Sarkar
  • 150
  • 8