ng-model with association on select box with ng-repeat on options

Question

I have a Plunker here illustrating my issue. I have an object with an associated division. There is no division_id on the object, but in order to set or update the division I need to set the division_id field. Here's the sample object:

$scope.user = {
  name: "John",
  age: 32,
  division: {
    id: 3,
    name: "Alpha"
  }
};

And the example divisions:

$scope.divisions = [
  {
    name: "Gamma",
    id: 1
  },
  {
    name: "Alpha",
    id: 3
  },
  {
    name: "Beta",
    id: 5
  }
];

The way I'm building the select box is with ng-repeat, which I was hoping would bypass the need to track ng-model for the selected value.

    <div class="form-group">
      <label for="">Division</label>
      <select type="text" ng-model="user.division_id">
        <option ng-repeat="division in divisions"
          ng-selected="user.division.id == division.id">{{ division.name }}</option>
      </select>
    </div>

As you can see in the demo, the selected attribute is being placed on the right option, but still the select box display is blank. Even if I add division_id: 3 to the object, it continues to be blank. How can I get this to work without having to do a conversion on the object when loading and updating?

Edit: To address this question being flagged as a duplicate, I think this is unique because I'm asking how to build the select box with ng-repeat, not ng-options. Though the answer is similar to the answer for the proposed duplicate, I think other people might get stuck on this method and find it helpful to see the answer requires a different technique.

Possible duplicate of [ng-selected not working in select element](http://stackoverflow.com/questions/17645620/ng-selected-not-working-in-select-element) — Sterling Archer, May 09 '16 at 21:00

Dan · Accepted Answer · 2016-05-09T21:47:20.193

0

If you update your select as follows it will display by default to the users division.id.

<select ng-model="user.division" ng-options="d as d.name for d in divisions track by d.id">

You seemed to be wanting to have a separate model division_id, the only reason I can think of for this is that you wanted to control the persistence of the user model when the selection is updated. If for some reason you want to intercept the end-users selection to the user model (or even just the in-memory user object) being updated then use a copy/there are many ways to do that, but it's not clear if that's what you're asking.

Updated plunkr

Note it would have worked to have kept the same option ng-repeat syntax, but this is the recommended angular way to deal with options.

edited May 09 '16 at 21:47

answered May 09 '16 at 21:29

Dan

2,830
19
37

The problem is that `user.division.name` should also update. – dfsq May 09 '16 at 21:39
So then just use `ng-model="user.division"` and use `ng-options="d as d.name for d in divisions track by d.id"`. I've updated above. – Dan May 09 '16 at 21:46
Yes, what I said 30 mins ago. I would also suggest this as a solution. – dfsq May 09 '16 at 21:48
"but still the select box display is blank." @dfsq You were fast, correct, smarter than me, but not complete :), this solution removes the initial 4th blank option. – Dan May 09 '16 at 22:29
Of course there will be blank option (no need to remove it). One would just need to set correct model. http://plnkr.co/edit/nKprznI4KgjAmhpmfW63?p=preview – dfsq May 09 '16 at 22:35
The `ng-options` syntax always trips me up. I tried changing the plunkr back to the option with `ng-repeat` format, using `user.division` as the `ng-model` attribute, but it didn't seem to work. Is still there something I'm missing or is `ng-options` really the only way to go with this? http://plnkr.co/edit/FUvE64ZhL30wrwmk53YF?p=preview – Shaun May 10 '16 at 03:05
I think *not using* that syntax is tripping you up! Me too.. can't see a way to get what you want using the `ng-repeat`. – Dan May 10 '16 at 04:16

score 0 · Answer 2 · answered May 09 '16 at 21:34

As per your plunker, you need to remove the ng-model directive from the select tag for it to work.

if you need to set a division_id variable for your code, you can use ng-init.

<div class="form-group">
  <label for="">Division</label>
    <select type="text">
       <option ng-repeat="division in divisions"
          ng-selected="user.division.id == division.id"
          ng-init="division_id=division.name">{{ division.name }}
       </option>
      </select>
    </div>

By removing the model, the user.division will never be updated. `ng-init` is not recommended. — Dan, May 09 '16 at 22:27

ng-model with association on select box with ng-repeat on options

2 Answers2