Angularjs Dropdown 和自定义过滤器的问题

Question

我在使用填充有 ng-repeat 选项值的下拉菜单时遇到问题，甚至在使用 ng-options 时也遇到了问题。

基本上，我是从数据库中提取子公司列表。然后，我有一个下拉列表来选择一家公司，而该公司又应使用所选公司的子公司填充子公司下拉列表。由于许多子公司属于同一家公司，如果我尝试在 ng-repeat 中提取公司名称，我会多次获得同一家公司。所以我创建了一个自定义过滤器，它只过滤掉列出的每家公司的 companyName 和 companyID 一次。

理论上，当我更改公司下拉列表的值时，会列出正确的子公司。但是，公司框中显示的值停留在列出的第一个选项上并且不会改变。如果我删除自定义过滤器并允许它列出所有重复名称，则该框将正确显示。

我的第一个想法是进行单独的 HTTP 调用，它只会从我的公司表中获取公司，但我想我想将 HTTP 调用限制为尽可能少。另外，我似乎应该能够做到这一点。

当我使用过滤器时，我没有掌握什么概念会阻止它正确显示，我应该怎么做才能解决这个问题？ 谢谢

HTML：

<div class="col-sm-5">
   <select ng-model ="parentCompany" name="company">
      <option ng-repeat="company in companies | uniqueCompanies:'companyName'" value="{{company.id}}" >{{company.name}}</option>
    </select>                                                 
</div>

<div class="col-sm-5">
   <select name="subsidiary">
    <option ng-repeat="subsidary in companies" value="{{subsidary.subID}}" ng-hide="$parent.parentCompany !== subsidary.companyID">{{subsidary.subName}}</option>
   </select>
</div>

控制器：

  getCompanies();
            function getCompanies(){
                 $http.get("get.php?table=getcompanies").success(function(data) {
                    $scope.companies = data;
                });
            }

过滤器：

.filter("uniqueCompanies", function() {
            return function(data, propertyName) {
                if (angular.isArray(data) && angular.isString(propertyName)) {
                    var results = [];
                    var keys = {};
                    for (var i = 0; i < data.length; i++) {
                        var val = data[i][propertyName];
                        var val2 = data[i]['companyID'];
                        if (angular.isUndefined(keys[val])) {
                            keys[val] = true;
                            results.push({'name':val, 'id':val2});
                        }
                    }
                    return results;
                } else {
                    return data;
                }
            };
        });

样本数据：

[{"subID":null,"subName":null,"companyID":"1","companyName":"DWG"},
 {"subID":null,"subName":null,"companyID":"2","companyName":"Vista"},
 {"subID":"1008","subName":"Data Services","companyID":"3","companyName":"Medcare"},
 {"subID":"1009","subName":"Companion","companyID":"3","companyName":"Medcare"},
 {"subID":"1010","subName":"GBA","companyID":"3","companyName":"Medcare"},
 {"subID":"1011","subName":"PGBA","companyID":"3","companyName":"Medcare"},
 {"subID":"1013","subName":"Health Plan","companyID":"3","companyName":"Medcare"},
 {"subID":"1014","subName":"PAISC","companyID":"3","companyName":"Medcare"},
 {"subID":"1015","subName":"CGS","companyID":"3","companyName":"Medcare"}]

Answer 1

您正在过滤器中创建具有不同属性的新对象，因此它们每次都会有所不同。你可以像其他人提到的那样track by。由于过滤器执行every digest cycle，您可能希望设置$watch，并且仅在您的公司发生变化时创建一个新的唯一公司列表。我实际上没有这样做就得到了10 $digest() iterations reached 错误。

$scope.$watchCollection('companies', function(newValue) {
    $scope.filteredCompanies = $filter('uniqueCompanies')($scope.companies, 
        'companyName');
});

您还可以在parentCompany 上设置监视并仅在其更改时创建子公司列表，并清除您对subvisoryCompany 的值：

$scope.$watch('parentCompany', function(newValue) {
  $scope.subsidiaries = [];
  for (var i = 0; i < $scope.companies.length; i++) {
    var c = $scope.companies[i];
    if (c.companyID === newValue) {
      $scope.subsidiaries.push(c);
    }
  }
  $scope.subsidiaryCompany = undefined;
});

Answer 2

我可能不完全理解您的问题，但看起来您可以在获得数据时对其进行过滤。比如……

function getCompanies(){
  $http.get("get.php?table=getcompanies").success(function(data) {
    $scope.companies = data.reduce(function (prev, cur) {
      // some code for skipping duplicates goes here                              
    }, []);
  });
}

Array.reduce 可能不是获得没有重复的新数组的最佳方法，但无论如何，这是一般的想法。