角度 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
    }
}

未将选择设置为正确的值。模型绑定似乎以 1 方式工作，而不是 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>