angular 1.6.7 simple select binding not setting the select value

Question

(function(angular) {
  'use strict';
  angular.module('myApp', [])
    .controller('Controller', [function() {
      this.model = {
        person: {
          titleId: 4
        }
      }
    }]);
})(window.angular);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="Controller as nb">
    <select ng-model="nb.model.person.titleId">
          <option value="1">A</option>
          <option value="2">B</option>
          <option value="3">C</option>
          <option value="4">D</option>
      </select>
      
      <p>{{nb.model.person.titleId}}</p>
  </div>
</div>

When I select A, B, C or D the model value is updated as expected. person has a titleId value between 1 and 4.

However when loading up a new model, with a titleId.

{
    "person": {
        "titleId": 4
    }
}

The select is not being set to the correct value. The model binding seems to be working 1 way, and not 2 way?

Is there an easy way to fix this?

Satpal · Accepted Answer · 2017-12-19 06:13:49Z

3

You should set it as "4"

(function(angular) {
  'use strict';
  angular.module('myApp', [])
    .controller('Controller', [function() {
      this.model = {
        person: {
          titleId: "4"
        }
      }
    }]);
})(window.angular);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="Controller as nb">
    <div class="input-group">
      <select class="form-control" id="Person_TitleId" name="Person.TitleId" ng-model="nb.model.person.titleId">
          <option value="1">A</option>
          <option value="2">B</option>
          <option value="3">C</option>
          <option value="4">D</option>
      </select>
    </div>
  </div>

However I would recommend you to use ngOptions

(function(angular) {
  'use strict';
  angular.module('myApp', [])
    .controller('Controller', [function() {
      this.model = {
        person: {
          titleId: 4
        }
      }
      this.options = [{
        label: 'A',
        titleId: 1
      }, {
        label: 'B',
        titleId: 2
      }, {
        label: 'C',
        titleId: 3
      }, {
        label: 'D',
        titleId: 4
      }]

    }]);
})(window.angular);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="Controller as nb">
    <select ng-model="nb.model.person" ng-options="a.label for a in nb.options track by a.titleId ">          
      </select>
    <p>{{nb.model.person}}</p>
  </div>

edited Dec 19, 2017 at 6:13

answered Dec 19, 2017 at 6:02

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

2 Comments

Jim Over a year ago

Thanks for the quick response: that's decidedly inconvenient when the value is in fact a number.

Satpal Over a year ago

@Jim, then better use ngOptions I have updated answer and added code snippet above with it

Collectives™ on Stack Overflow

angular 1.6.7 simple select binding not setting the select value

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related