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是带有数组作业标题的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>

它没有将对象设置为选中，而是在第一个选项中设置空值。我该怎么做？

Answer 1

默认情况下，ngModel通过引用而非值来监视模型。这是   将select绑定到作为对象的模型时很重要   或收藏。

如果要预选选项，则会出现一个问题。例如，如果   您将模型设置为一个等于您的对象的对象   集合，ngOptions将无法设置选择，因为   对象不完全相同。因此，默认情况下，您应该始终参考   集合中用于预选的项目，例如：$ scope.selected =   $ scope.collection [3]

另一个解决方案是使用track by子句，因为这样就是ngOptions   将通过引用而不是通过引用来跟踪项目的标识   通过表达的轨迹的结果。例如，如果你的收藏   item有id属性，你可以通过item.id跟踪。

〜取自关于ngOptions的官方docs

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

1 个答案: