각도 : 여러 항목 필터링

Question

각도가 너무 새롭고 필터링 기능에 문제가 있습니다.

먼저 json 파일에서 콘텐츠를 가져오고 있습니다. 꽤 간단합니다 :

[ 
{ 
    "id":"0", 
    "animal":"cat", 
    "breed":"siamese", 
    "name":"kevin", 
    "photo": "/images/kevin.jpg" 
}, 
{ 
    "id":"1", 
    "animal":"dog", 
    "breed":"pug", 
    "name":"barney", 
    "photo": "/images/barney.jpg" 
} 
] 

등등.

html 페이지에 있습니다.

$scope.filterData = function(item) 
    {   
     var passFilterType = $filter('filterType')($scope.original_data, item); 

     if(passFilterType.length > 0) 
     { 
      $scope.isLoading = true; 
      $scope.isSuccessful = false; 
      $scope.percentLoaded = 0; 

      $scope.thumbnails = passFilterType; 

      loadImages(); 

     }else{ 
      console.log("error"); 
     } 
} 


    function loadImages() 
    { 
     var passImages = getImages(); 

     if(passImages.length > 0) 
     { 
      preloader.preloadImages(passImages).then(handleResolve, handleReject, handleNotify); 
     } 
    } 

내 계획 : 필터의

<ul> 
    <li ng-repeat="item in animal_data"> 
    <a href="" ng-click="filterData(item.animal)">{{item.animal | uppercase}}</a> 
    </li> 
</ul> 

<ul> 
    <li ng-repeat="item in breed_data"> 
    <a href="" ng-click="filterData(item.breed)">{{item.breed | uppercase}}</a> 
    </li> 
</ul> 

스크립트 데이터와는 아무 상관이없는 자신의 JSON 파일에서 온 탐색 포인트, 그냥 값을 메뉴를 생성하고 전달하는 의미 LI를 확인란으로 변환 한 다음 도움이 필요한 시점으로 안내합니다. 이미 여러 동물과 번식을 걸러 내는데 사용하도록 설정 한 방법을 사용할 수 있습니까?

도움을 주신 모든 분들께 감사드립니다.

Answer 1

내 생각에이 코드는 사용자가 찾고있는 코드 일 수도 있고 (마지막 코드 스 니펫 실행) 아이디어를 제공 할 수도 있습니다. 자신의 목적에 맞게 코드를 재구성 할 수 있습니다.

키 포인트는

• 겨-reapeat 확인란 고유 품종과 동물을 기반으로. ui.filters의 고유 한 필터를 사용했지만 직접 롤업 할 수는 있습니다.

  <label ng-repeat="item in animal_data | unique:'breed'">{{item.breed}} <input type="checkbox" ng-model="selected[item.breed]"></input> </label>

• 는 결과를 나열하고, 체크 박스에서 선택된 항목에 해당 평가 발현하는 기능을 제공 NG 반복 필터링 내장 사용.

  <li ng-repeat="item in animal_data | filter:check(selected)">

• 그리고 그 함수 만들기 :

  $scope.check = function(selected) { return function(item) {
if (selected[item.animal] || selected[item.breed]) return true; else return false; }; }

과 함께 모든 ...

var app = angular.module('testApp', ['ui.directives', 'ui.filters']); 
 

 
app.controller('testCtrl', function($scope) { 
 
    $scope.selected = {}; 
 

 
    $scope.animal_data = [{ 
 
    "id": "0", 
 
    "animal": "cat", 
 
    "breed": "siamese", 
 
    "name": "kevin", 
 
    "photo": "/images/kevin.jpg" 
 
    }, { 
 
    "id": "1", 
 
    "animal": "dog", 
 
    "breed": "pug", 
 
    "name": "barney", 
 
    "photo": "/images/barney.jpg" 
 
    }, { 
 
    "id": "2", 
 
    "animal": "dog", 
 
    "breed": "poodle", 
 
    "name": "charlie", 
 
    "photo": "/images/barney.jpg" 
 
    }]; 
 

 

 
    $scope.check = function(selected) { 
 
    return function(item) { 
 
     if (selected[item.animal] || selected[item.breed]) 
 
     return true; 
 
     else 
 
     return false; 
 
    }; 
 
    } 
 

 
    $scope.filterData = function(item) { 
 
    var passFilterType = $filter('filterType')($scope.original_data, item); 
 

 

 

 
    if (passFilterType.length > 0) { 
 
     $scope.isLoading = true; 
 
     $scope.isSuccessful = false; 
 
     $scope.percentLoaded = 0; 
 

 
     $scope.thumbnails = passFilterType; 
 

 
     loadImages(); 
 

 
    } else { 
 
     console.log("error"); 
 
    } 
 
    } 
 
}); 
 

 

 
function loadImages() { 
 
    var passImages = getImages(); 
 

 
    if (passImages.length > 0) { 
 
    preloader.preloadImages(passImages).then(handleResolve, handleReject, handleNotify); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script> 
 
<div ng-app='testApp'> 
 
    <div ng-controller="testCtrl"> 
 

 
    <li ng-repeat="item in animal_data">{{item}}</li> 
 
    <ul> 
 
     BREED: 
 
     <label ng-repeat="item in animal_data | unique:'breed'">{{item.breed}} 
 
     <input type="checkbox" ng-model="selected[item.breed]"></input> 
 
     </label> 
 
     <br/>ANIMAL: 
 
     <label ng-repeat="item in animal_data | unique:'animal'">{{item.animal}} 
 
     <input ng-model="selected[item.animal]" type="checkbox"></input> 
 
     </label> 
 
     
 

 
     <table width="400"> 
 
     <thead> 
 
      <th>animal</th> 
 
      <th>breed</th> 
 
      <th>name</th> 
 
      <th>link</th> 
 
      <tr ng-repeat="item in animal_data | filter:check(selected)"> 
 
      <td>{{item.animal | uppercase}}</td> 
 
      <td>{{item.breed}}</td> 
 
      <td>{{item.name}}</td> 
 
      <td> <a href="" ng-click="filterData(item)">filterDataLink</a> 
 
      </td> 
 
      </tr> 
 
     </table> 
 

 
    </div> 
 
</div>