카테고리 및 태그가있는 angularJS로 라이브 검색

우선 내가 다음과 같이 말하고 싶습니다. AngularJS와 함께 고급 라이브 검색을 위해 fiddle을 작성했는데 훌륭한 작업을하고 있습니다.하지만 제 시나리오에서는 catergories와 category childs를 모두 검색해야합니다. .카테고리 및 태그가있는 angularJS로 라이브 검색

예 목록 :

$scope.names = [ 
     { 
     name: "Kitchen", 
     tags: [ 
     "Knife", 
     "Plate", 
     "Fork" 
     ] 
     }, 
     { 
     name: "Garage", 
     tags: [ 
     "Car", 
     "Wrench", 
     ] 
     }

시나리오 검색 :

입력 검색 :

knife

결과 :

<li><b>Kitchen</b></li> 
<li>Knife</li>

시나리오 검색 2 :

입력 검색 :

garage

결과 :

<li><b>Garage</b></li>

나는 어떤 형태를 만들기 위해 노력했습니다 '더블'뭔가 이런

와 ng-repeat : ng-repeat="name in names || name in names 차일에서 범주를 분리하여 그러나 목록을 채우는 것에는 문제가있을 것입니다. 나는 또한 AND에 대한 올바른 연산자를 모르지만이 훨씬 더 나은 솔루션이 상상할 수 있지만 어떻게 AngularJS 및 JS 꽤 새로운 오전 유의하십시오.

출처

2016-08-13 Charlie

배열을 평면 1 차원 배열로 사전 처리 한 다음이를 사용하여 검색을 수행하는 것이 좋습니다. –

네, 괜찮 겠지 만 어떻게 catnames에 대담한 텍스트를 추가 할 수 있습니까? – Charlie

각 배열 요소는 선택적 category 속성을 가질 수 있습니다. 원본 배열을 처리하는 동안 각 태그에 연결할 수 있습니다. –

이 두 배열에서 작동필터를 만들려면, 당신은 사용자 정의filter을 만들어야합니다.

는 이 작업을 참조하십시오 :

angular .module('app', []) .controller('MainCtrl', MainCtrl) .filter('customFilter', customFilter); MainCtrl.$inject = ['$scope']; function MainCtrl($scope) { $scope.names = [ { name: "Kitchen", tags: [ "Knife", "Plate", "Fork" ] }, { name: "Garage", tags: [ "Car", "Wrench", ] } ]; } function customFilter() { return function(items, search) { if (!search) return items; search = search.toLowerCase(); return items.filter(function(item) { return item.name.toLowerCase().indexOf(search) !== -1 || item.tags.filter(function(tag) { return tag.toLowerCase().indexOf(search) !== -1; }).length; }); } }

<!DOCTYPE html> <html ng-app="app"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> </head> <body ng-controller="MainCtrl"> <input type="text" placeholder="Search..." ng-model="search"> <ul ng-repeat="obj in names | customFilter: search track by $index"> <li><strong ng-bind="obj.name"></strong></li> <ul> <li ng-repeat="tag in obj.tags | filter: search track by $index" ng-bind="tag"></li> </ul> </ul> </body> </html>

나는 그것이 도움이되기를 바랍니다.

출처

2016-08-14 04:12:38 developer033

카테고리 및 태그가있는 angularJS로 라이브 검색

답변

관련 문제