2017-11-07 3 views
0

私が達成したいのはレターフィルタです。データをフィルタリングするためのAからZまでのボタン。文字Aボタンをクリックすると、Aを含むすべてのデータが表示され、残りのデータは非表示になります。Angular js:ng-repeat filter returns undefined

これはこれまで私が試したことですが、問題はフィルタにあり、undefinedを返します。アルファベットボタンをクリックするたびに、$scope.filterActiveというパラメータがこのスクリーンショットに戻りますが、$scope.activeはクリックされたアルファベットを返します。

enter image description here

角度:

$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> 

私はすでにこの記事次試してみました:https://toddmotto.com/everything-about-custom-filters-in-angular-js/

私のJSONデータは、これらのような$http.getなものから復帰しかし、再

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"} 
+0

フィルタをオフにすると機能しますか? –

+0

@ProfessorAllman製造元のフィルタリングを意味しますか?filterActive?フィルタリングエラーが発生しました – boang3000

+0

メーカーのデータに「ng-repeat =」という情報が含まれていることを確認するフィルタはありませんでした。コードが正常に動作しているようです(https://jsfiddle.net/dre5a0ru/) –

答えて

1

データを配列変数で使用できるようにする必要があります。フィルターを適用する必要があります。

hereにjsfiddleご確認ください次のサンプルコード

//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(); 

を確認してください。

これがあなたを手伝ってくれることを願っています!

+0

これを試しましたが、私のボタンをクリックしてもそれは動作せず、 '{id:undefined、name:undefined、documents:undefined、$ – boang3000

+1

メーカーの配列にデータを追加しましたか? –

+0

あなたのプランナーのフィルタ関数 'filterData'は' anyNameStartsWith'の戻り値を返します。真実ではなく、objです。 – vinays84