将对象设置为ngoptions中选择的对象

Question

我在选择指令中使用ngOptions像

<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是一个具有数组jobtitle的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

默认情况下，ngModel通过引用而非值监视模型。了解将选择绑定到作为对象或集合的模型时，这一点很重要。

如果您要预选一个选项，则会发生一个问题。例如，如果将模型设置为与集合中的对象相等的对象，则ngOptions将无法设置选择，因为这些对象不相同。因此，默认情况下，您应始终参考集合中的项目以进行预选择，例如：$ scope.selected = $ scope.collection [3]。

另一种解决方案是使用track by子句，因为ngOptions不会通过引用而是通过表达式的跟踪结果来跟踪项的标识。例如，如果您的收集项目具有id属性，则可以按item.id进行跟踪。

〜取自有关ngOptions 的官方文档

我通过在单独的选择框中使用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>