Angular js：ng-repeat过滤器返回undefined

Question

我想要达到的是一个字母过滤器。从A到Z的按钮，用于过滤数据。单击字母A按钮时，将显示所有带有A的数据，其余数据将被隐藏。

这是我到目前为止所尝试的内容，但问题出在undefined过滤器中，它返回$scope.filterActive。每次单击“字母”按钮时，$scope.active的参数都会返回到此屏幕截图，但$scope.alphabet = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z".split(","); $scope.active = null; $scope.setActiveLetter = function(letter) { $scope.active = letter.toLowerCase(); $scope.selectedLetter = letter.toLowerCase(); }; $scope.filterActive = function(value) { if ($scope.active) { // return value.charAt(0).toLowerCase() === $scope.active; } return true; } 会返回单击的字母。

角：

<button type="button" class="btn-alphabet btn btn-default" ng-bind="letter" ng-repeat="letter in alphabet" ng-click="setActiveLetter(letter)" ng-class="{'btn-primary': letter==active}">{{ letter }}</button>

<div class="manufacturers-content" ng-repeat="data in manufacturers | filter:filterActive">
   <a ui-sref="manufacturersDetail({id: data.id})">
      {{ data.name }} <span>({{ data.documents.length }})</span>
   </a>
</div>

查看：

$http.get

我已尝试过这篇文章：https://toddmotto.com/everything-about-custom-filters-in-angular-js/

我的JSON数据从这些类似的1:{id: "53", name: "TEST 0", documents: Array(5), $$hashKey: "object:34"} 2:{id: "69", name: "Test 1", documents: Array(7), $$hashKey: "object:36"} 3:{id: "46", name: "Test 2", documents: Array(45), $$hashKey: "object:38"} 4:{id:"70", name: "Test 3", documents: Array(2), $$hashKey: "object:40"} 返回，但实际数据来自客户端，包含大约数百个数据：

compile 'com.github.JakeWharton:ViewPagerIndicator:2.4.1'

Answer 1

您需要确保数据在数组变量中可用，当您要应用过滤器时。

请查看以下示例代码

 //make sure data is available or not 
 $scope.manufacturers = [];

 $scope.filterActive = function(value) {
    if ($scope.active) {
        // return value.charAt(0).toLowerCase() === $scope.active;
    }
    return true;
  }

  //for example your calling API

  function getdata(){
    //response
     $scope.manufacturers = response.length ? response : [];
  }

 getdata();

请检查jsfiddle到here。

希望这会对你有帮助！