angular 1.6.7简单选择绑定不设置选择值

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>

当我选择A，B，C或D时，模型值会按预期更新。 person的titleId值在1到4之间。

但是当加载一个新模型时，使用titleId。

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

选择未设置为正确的值。模型绑定似乎是单向工作，而不是2路？

有没有一种简单的方法来解决这个问题？

Answer 1

你应该把它设置为"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>

---

但是我建议你使用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>