如何在 ng-repeat 指令中正确使用 ui-select答案

【问题标题】：How to use properly ui-select in ng-repeat directive如何在 ng-repeat 指令中正确使用 ui-select
【发布时间】：2018-07-17 18:25:37
【问题描述】：

我有一个 ui-select，它包含在 ng-repeat 指令中。由于它们共享相同的范围，我有几个问题：

在第一次选择中选择值后，第二次选择已经预填充了我首先输入的内容。
占位符被隐藏，仅在选择字段处于焦点时显示。

这里是html：

<div ng-repeat="repeat in repeats">
  <p>Selected: {{repeat.id.formatted_address}}</p>
  <ui-select ng-model="repeat.id"
             theme="bootstrap"
             ng-disabled="disabled"
             reset-search-input="false"
             style="width: 300px;">
    <ui-select-match placeholder="Enter an address...">{{$select.selected.formatted_address}}</ui-select-match>
    <ui-select-choices repeat="address in addresses track by $index"
                       refresh="refreshAddresses($select.search)"
                       refresh-delay="0">
      <div ng-bind-html="address.formatted_address | highlight: $select.search"></div>
    </ui-select-choices>
  </ui-select>
</div>

问题是使用多个ui-select 指令来防止这些问题的正确方法是什么？

Demo Plunker

【问题讨论】：

标签： angularjs angularjs-ng-repeat ng-repeat ui-select

【解决方案1】：

您可以为地址查找创建一个指令，并将您的查找逻辑移动到指令控制器中。每个指令实例都有自己的控制器实例，因此也有自己的 $scope.addresses 实例（防止预填充第二个和第一个选择的行为）。

<div ng-repeat="repeat in repeats">
  <address-selector repeat="repeat"></address-selector>
</div>

app.directive('addressSelector', function() {
  return {
    restrict: 'E',
    scope: {
      repeat: '='
    },
    template:
    '<p>Selected: {{repeat.id.formatted_address}}</p>' +
    '<ui-select ng-model="repeat.id"' +
    '    theme="bootstrap"' +
    '    ng-disabled="disabled"' +
    '    reset-search-input="false"' +
    '    style="width: 300px;">' +
    '<ui-select-match placeholder="Enter an address...">{{$select.selected.formatted_address}}</ui-select-match>' +
    '<ui-select-choices repeat="address in addresses track by $index"' +
    '    refresh="refreshAddresses($select.search)"' +
    '    refresh-delay="0">' +
    '  <div ng-bind-html="address.formatted_address | highlight: $select.search"></div>' +
    '</ui-select-choices>' +
    '</ui-select>',
    controller: function ($scope, $http) {
      $scope.refreshAddresses = function(address) {
        var params = {address: address, sensor: false};
        return $http.get(
          'http://maps.googleapis.com/maps/api/geocode/json',
          {params: params}
        ).then(function(response) {
          $scope.addresses = response.data.results
        });
      };
    }
  };
});

要让 ui-select 占位符出现，您应该避免初始化模型 (repeat.id)，或者将其设置为 null。

app.controller('DemoCtrl', function($scope) {
  $scope.repeats=[{}, {}];
});

Updated Plunker

【讨论】：

【解决方案2】：

你也可以这样做。数组中的每个对象都有自己的selected 项。要添加新的重复，您只需 $scope.repeats.push({}) 并删除重复执行 $scope.repeats.splice(index, 1);。如果您想将$scope.repeats 推送到 API，请记住使用 angular.toJson($scope.repeats) 而不是 JSON.stringify($scope.repeats)。

如果您只有该数据，则不需要 selected 子项。我有更多物品，所以这对我很有用

file.js

$scope.repeats=[{}, {}];

file.html

<div ng-repeat="repeat in repeats">
  <p>Selected: {{repeat.selected.formatted_address}}</p>
  <ui-select ng-model="repeat.selected">
    <ui-select-match placeholder="Enter an address...">
      {{$select.selected.formatted_address}}
    </ui-select-match>
    <ui-select-choices repeat="address in addresses track by $index">
      <div ng-bind-html="address.formatted_address | highlight: $select.search"></div>
    </ui-select-choices>
  </ui-select>
</div>

输出数据可能如下所示：

$scope.repeats == [
    {
        selected: {
            formatted_address: "98 Hubin Middle Rd"
        }
    },
    {
        selected: {
            formatted_address: "100 Rogwart Way"
        }
    }
];

【讨论】：