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上设置监视，并仅在其更改时创建子公司列表，并清除您对子公司的价值：

$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可能不是获得没有重复项的新数组的最佳方法，但无论如何这都是一般的想法。

Angularjs下拉列表和自定义过滤器问题

2 个答案: