将对象设置为在 ngoptions 中选中

Question

我将 ngOptions 用于 select 指令，例如

<select class="form-control" ng-model="users.jobTitle" name="jobTitle" data-ng-options="job as job.value for job in ds.jobTitle" required>

我在控制器中设置默认值，如

$scope.users.jobTitle = $scope.ds.jobTitle[0];

ds 是 json 数组职位：

"jobTitle":[
  {"id":1,"value":"Service1"},
  {"id":2,"value":"Service2"},
  {"id":3,"value":"Service3"}
],

现在我正在保存并获得像

这样的结果（控制台）

jobTitle:Object
       $$hashKey:"object:173"
       id:1
     value:"Service1"

现在当我编辑时，提供服务调用数据，例如

$scope.useredit.jobTitle = data.jobTitle;

对于

<select class="form-control input-sm" ng-model="useredit.jobTitle" name="jobTitle" data-ng-options="job as job.value for job in ds.jobTitle" required>
</select>

它没有将对象设置为 selected ，而是在第一个选项中设置了 null 值。我必须做什么？

Answer 1

By default, ngModel watches the model by reference, not value. This is important to know when binding the select to a model that is an object or a collection.

One issue occurs if you want to preselect an option. For example, if you set the model to an object that is equal to an object in your collection, ngOptions won't be able to set the selection, because the objects are not identical. So by default, you should always reference the item in your collection for preselections, e.g.: $scope.selected = $scope.collection[3].

Another solution is to use a track by clause, because then ngOptions will track the identity of the item not by reference, but by the result of the track by expression. For example, if your collection items have an id property, you would track by item.id.

~取自官方docs关于ngOptions

我在单独的 select 框中使用 ng-options 对其进行了测试，它有效。

请参阅下面的演示。

angular.module('app', [])
  .controller('TestController', ['$scope',
    function($scope) {
      $scope.ds = {};
      $scope.ds.jobTitle = [{
        "id": 1,
        "value": "Service1"
      }, {
        "id": 2,
        "value": "Service2"
      }, {
        "id": 3,
        "value": "Service3"
      }];

      var data = {
        jobTitle: {
          "id": 1,
          "value": "Service1"
        }
      };

      $scope.useredit = {
        jobTitle: data.jobTitle
      };

    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="TestController">
    <br />Without using track by in ngOptions
    <select class="form-control" ng-model="useredit.jobTitle" name="jobTitle" data-ng-options="job as job.value for job in ds.jobTitle" required>
    </select>
    <br />
    <br />
    <br />Using track by in ngOptions
    <select class="form-control" ng-model="useredit.jobTitle" name="jobTitle" data-ng-options="job as job.value for job in ds.jobTitle track by job.id" required>
    </select>
  </div>
</div>

将对象设置为在 ngoptions 中选中

set object as selected in ngoptions

javascript

angularjs

angularjs-ng-options