angular-ui/ui-select:如何正确设置初始选定对象

Question

这是我在视图中的ui选择:

<ui-select ng-model="selectedLabel.selected" ng-disabled="fetchingLabels || working">
    <ui-select-match placeholder="">{{$select.selected.code}}</ui-select-match>
    <ui-select-choices repeat="label in labels| filterBy: ['name', 'code']: $select.search"> 
        <div ng-bind-html="label.code | highlight: $select.search"></div>
        <small ng-bind-html="label.name | highlight: $select.search"></small>
    </ui-select-choices>
</ui-select>

这是我的控制器中的相关代码:

$scope.labels = [];
$scope.selectedLabel = {};
$scope.selectedLabel.selected = $scope.passedLabel; // This is an object passed 
                                                    // from the previous controller.
                                                    // The scope comes with it.


$scope.fetchLabels(); // This fetches the labels from the server
                      // and puts them in $scope.labels

从服务器带来的标签理论上如下:

[{'labelId': 20, 'code': 'L20', 'name': 'some label'},
 {'labelId': 21, 'code': 'L21', 'name': 'other label'}, ...]

传递来自外部的标签'passLabel'在理论上也是其中之一$scope.labels,例如:

  passedLabel = {'labelId': 21, 'code': 'L21', 'name': 'other label'}

......我说理论上是因为,根据经验,我看到它们是不同的,因为角度增加了它们(例如$$hashKey,或__proto__).

因此,由于这种差异,它$scope.selectedLabel.selected = $scope.passedLabel与ui-select中的相应项不匹配(它们不是同一个对象),因此,结果就是这种行为:

如何正确设置初始选择？有没有办法可以使用id而不是object comparisson？我想避免for这样:

  for (i=0; i<$scope.labels; i++) {
      if ($scope.labels[i].labelId == $scope.passedLabel.labelId) {
           $scope.selectedLabel.selected = $scope.labels[i]
      }
  }

我很确定它会像预期的那样工作,但是我必须for在ajax返回后调用它...而且我还有其他的ui选择

Answer 1

如果您想要达到您提到的状态,那么只需将正确的引用传递给您的模型即可.

因此,在fetchlabel调用成功后,您可以在标签中设置值.现在,在此功能的成功中,您需要调用提取的函数presentLabel.

只要获得当前标签的数据,就可以在标签范围内获取该对象的索引.

var idx;
_.find($scope.labels, function(label, labelIdx){ 
  if(label.labelId == parentLabel.labelId){ idx = labelIdx; return true;}; 
});

$scope.selectedLabel = {};
$scope.selectedLabel.selected = $scope.labels[idx];

这将解决您的目的.