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
– Bala Abhinav, Commented Jan 19, 2017 at 8:29

Aks1357 · Accepted Answer · 2017-01-19 09:26:17Z

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, 2017 at 9:26

answered Jan 19, 2017 at 8:43

Aks1357

1,0721 gold badge9 silver badges19 bronze badges

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

4 Comments

Mindaugas Over a year ago

I really want to use numeric type in data.cruiseCategoryId. Maybe you have any suggestions on achieving this?

Aks1357 Over a year ago

@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 Over a year ago

@Mindaugas - please check option 2, hope that resolves the issue

Mindaugas Over a year ago

looks like option 2 is breaking model binding.

Manishz90 · Accepted Answer · 2017-01-19 14:20:45Z

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

Kursad Gulseven · Accepted Answer · 2017-01-19 08:35:51Z

0

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

answered Jan 19, 2017 at 8:35

Kursad Gulseven

2,0081 gold badge27 silver badges28 bronze badges

Comments

Manishz90 · Accepted Answer · 2017-01-19 08:54:09Z

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, 2017 at 8:54

Manishz90

2,6341 gold badge14 silver badges11 bronze badges

1 Comment

Mindaugas Over a year ago

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.

Community · Accepted Answer · 2017-05-23 12:16:28Z

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, 2017 at 12:16

CommunityBot

11 silver badge

answered Jan 19, 2017 at 8:24

Alteyss

5133 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to make angular select to select a selected value

5 Answers 5

4 Comments

Comments

Comments

1 Comment

Edit

Update

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

1 Comment

Edit

Update

Comments

Linked

Related