How to make angular select to select a selected value

Question

I have selected value coming from back end in JSON and i have select element content coming from back end in the same JSON also.

Problem is that selected value is not selected in the select element, but binding works fine when i select new element.

I tried several approaches (option element ng-repeat, ng-option) all with same result. Selected value which is in data.cruiseCategoryId was not selected in select element.

My app.js

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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.data = {
    cruiseCategoryDropdownOptions: [{
      disabled: false,
      group: null,
      selected: false,
      text: "Interior Cabin Bella",
      value: "6"
    }, {
      disabled: false,
      group: null,
      selected: false,
      text: "Interior Cabin Fantastica",
      value: "7"
    }, {
      disabled: false,
      group: null,
      selected: false,
      text: "Oceanview Cabin Fantastica",
      value: "8"
    }, {
      disabled: false,
      group: null,
      selected: false,
      text: "Balcony Bella",
      value: "9"
    }, {
      disabled: false,
      group: null,
      selected: false,
      text: "Balcony Fantastica",
      value: "10"
    }, {
      disabled: false,
      group: null,
      selected: false,
      text: "Balcony Aurea",
      value: "11"
    }, {
      disabled: false,
      group: null,
      selected: false,
      text: "Balcony Wellness",
      value: "12"
    }, {
      disabled: false,
      group: null,
      selected: false,
      text: "Suite Fantastica",
      value: "13"
    }, {
      disabled: false,
      group: null,
      selected: false,
      text: "Suite Aurea",
      value: "14"
    }, {
      disabled: false,
      group: null,
      selected: false,
      text: "Suite Yacht Club Deluxe",
      value: "15"
    }],
    cruiseCategoryId: 10
  }
});

My html

selected value: {{data.cruiseCategoryId}}
<select class="form-control"
    name="cruiseCategoryId"
    id="cruiseCategoryId"
    ng-options="i.value as i.text for i in data.cruiseCategoryDropdownOptions track by i.value"
    ng-model="data.cruiseCategoryId">
</select>

Problem plunker: https://plnkr.co/edit/vQxdDA

after you get back the data do a $scope.$apply() which will trigger a digest function to update the models — Bala Abhinav, Jan 19 '17 at 08:29

Aks1357 · Accepted Answer · 2017-01-19T09:26:17.197

3

Updated Plunker - https://plnkr.co/edit/0XApRsOwDq9uSt4u50Xx?p=preview

Your JSON has attribute "value" which is assigned string value Ex:value: "10" whereas cruiseCategoryId is assigned as cruiseCategoryId: 10 change it to cruiseCategoryId: "10"
Angular Doc mentions following - https://docs.angularjs.org/api/ng/directive/ngOptions

Be careful when using select as and track by in the same expression. under title select as and track by, so remove that

HTML :

<select class="form-control" name="cruiseCategoryId" id="cruiseCategoryId"
    ng-options="i.value as i.text for i in data.cruiseCategoryDropdownOptions"
    ng-model="data.cruiseCategoryId">
</select>

JSON : only change below

cruiseCategoryId: "10"

OPTION 2 :

HTML :

<select class="form-control" name="cruiseCategoryId" id="cruiseCategoryId"
    ng-options="i.value as i.text for i in data.cruiseCategoryDropdownOptions"
    ng-model="data.cruiseCategoryId.toString()">
</select>

JSON : no change

cruiseCategoryId: 10

edited Jan 19 '17 at 09:26

answered Jan 19 '17 at 08:43

Aks1357

1,062
1
9
19

I really want to use numeric type in data.cruiseCategoryId. Maybe you have any suggestions on achieving this? – Mindaugas Jan 19 '17 at 09:12
@Mindaugas - keeping data types same is the best option, otherwise there are workarounds; like before binding `ng-options` change data type of value to be int `parseInt(value)` or data.cruiseCategoryId to be string data type – Aks1357 Jan 19 '17 at 09:21
@Mindaugas - please check option 2, hope that resolves the issue – Aks1357 Jan 19 '17 at 09:26
looks like option 2 is breaking model binding. – Mindaugas Jan 19 '17 at 10:52

Manishz90 · Answer 2 · 2017-01-19T14:20:45.613

Problem: We have data in a particular format and we need to send it to ng-model in a different format, we can use $formatters and/or $parsers, these are properties on ngModelController.

Parsers

Parsers change how view values will be saved to the model.

ngModel.$parsers.push(function(value){
    value.toUpperCase();
    return value;
});

Formatters

Formatters work in the opposite way that Parsers do. Formatters deal with data coming up from the model into the view. They will get called whenever the model changes and has to be rendered. They will also be called on the initial load of the page.

ngModel.$formatters.push(function(value){
    value.toUpperCase();
    return value;
});

And now, here are the changes we need to make to fix the problem mentioned in the question:

1.Remove track by i.valuefrom ng-options.

2.Add a directive to parse and change data.cruiseCategoryId before sending it to ng-model.

Here is plunker

https://plnkr.co/edit/oGzw7pUyRAmybWXNvjCA?p=preview

score 0 · Answer 3 · edited May 23 '17 at 12:16

0

ng-init could be a solution on your select.

ng-init doc

Edit

I advice you to isolate your model and give it a default value with your data from your JSON. See your plunker updated :

https://plnkr.co/edit/a76v11FDlUii2YI9ccvl?p=preview

Update

Few solutions already exists here:

https://stackoverflow.com/a/31643062/5566936

Hope it helps.

edited May 23 '17 at 12:16

Community

1
1

answered Jan 19 '17 at 08:24

Alteyss

513
3
17

score 0 · Answer 4 · answered Jan 19 '17 at 08:35

0

Your track by statement breaks it. Use track by $index.

answered Jan 19 '17 at 08:35

Kursad Gulseven

1,978
1
24
26

score 0 · Answer 5 · answered Jan 19 '17 at 08:54

0

I made following two changes and it worked:

1.Changed the value of cruiseCategoryIdin $scope.datafrom number 10 to string '10'.

2.Removed track by i.valuefrom ng-options.

Here is plunker

https://plnkr.co/edit/oGzw7pUyRAmybWXNvjCA?p=preview

answered Jan 19 '17 at 08:54

Manishz90

2,534
1
12
11

That id in number on purpose. We store integer in the db. I would prefer to keep it as it is and solve the issue. – Mindaugas Jan 19 '17 at 09:14

How to make angular select to select a selected value

5 Answers5

Edit

Update