Угловой фильтр с множеством значений

-1

Мне нужна помощь с угловым фильтром. Мне нужно фильтровать массив по нескольким значениям в одном поле.Угловой фильтр с множеством значений

массив выглядит следующим образом:

$scope.items = [{ 
    "item": "one", 
    "tags": "2,5" 
}, { 
    "item": "two", 
    "tags": "3,4,6,7" 
}, { 
    "item": "three", 
    "tags": "1,3,5" 
}];

Я хочу искать предметы по тегам, которые разделены запятой.

Пример: в поле поиска пользовательские теги пользователя разделены запятой (или установите флажок) и выберите теги 1 и 3. Как перечислить все элементы, имеющие эти теги? В этом примере второй и третий пункт.

Plunker

https://plnkr.co/edit/6SidABYsjtrjtH3xqusA?p=preview

источник

2016-09-21 akuljana

вы можете сделать plunkr с вашим кодом будет лучше решить проблему –

Есть причина, почему ваши теги через запятую строка? Разве не было бы лучше для них быть массивами? I.e: '" tags ": [1,3,5]' – Martin

Вот ваш ответ требуется с помощью флажков.

angular.module('app', []) 
 
    .controller('Controller', function($scope) { 
 
    $scope.items = [{ 
 
     "name": "one", 
 
     "tags": "2,5" 
 
    }, { 
 
     "name": "two", 
 
     "tags": "3,4,6,7" 
 
    }, { 
 
     "name": "three", 
 
     "tags": "1,3,5" 
 
    }]; 
 

 
    $scope.items_dup = $scope.items 
 
    // checkbox selection 
 
    $scope.selection = []; 
 
    $scope.toggleSelection = function toggleSelection(filter) { 
 
     var idx = $scope.selection.indexOf(filter); 
 
     if (idx > -1) { 
 
     $scope.selection.splice(idx, 1); 
 
     } else { 
 
     $scope.selection.push(filter); 
 
     } 
 
    }; 
 

 
    // filter list 
 
    $scope.filter = function() { 
 
     filterTag($scope.selection,$scope.items); 
 
     function filterTag(selected,items){ 
 
     var out = []; 
 
     angular.forEach(items, function(value, key) { 
 
      angular.forEach(selected, function(inner_value, key) { 
 
      if(value.tags.split(',').indexOf(inner_value.toString()) > -1) 
 
      { 
 
       if(out.indexOf(value) == -1) 
 
       { 
 
       out.push(value) 
 
       } 
 
      } 
 
      }) 
 
     }) 
 
     if(out.length > 0) 
 
     { 
 
      $scope.items_dup = out; 
 
     } 
 
     else 
 
     { 
 
      $scope.items_dup = $scope.items; 
 
     } 
 
     } 
 
     
 
    }; 
 
    })

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script> 
 
</head> 
 
<body ng-app="app"> 
 
    <div ng-controller="Controller"> 
 
    <h1>Tag filter!</h1> 
 
    <li ng-repeat="item in items_dup"> 
 
     {{item.name}} 
 
    </li> 
 
    <hr> 
 
    <p>Select filter</p> 
 
    <label> 
 
     <input type="checkbox" value="1" ng-click="toggleSelection(1)"> 1 
 
    </label> 
 
    <br> 
 
    <label> 
 
     <input type="checkbox" value="2" ng-click="toggleSelection(2)"> 2 
 
    </label><br> 
 
    <label> 
 
     <input type="checkbox" value="3" ng-click="toggleSelection(3)"> 3 
 
    </label> 
 
    <br><br> 
 
    <button ng-click="filter()">Filter list</button> 
 
    </div> 
 
</body> 
 

 
</html>

Пожалуйста, запустите фрагмент кода и проверьте.

Here is the plunker

источник

2016-09-21 12:07:54 Sravan

@akuljana Вы пробовали это? – Sravan

Sravan это замечательно, но мои теги не массивы, вот в чем проблема. И я не могу преобразовать это в массив в источник данных. Как изменить решение для приема тегов с разделителями-запятыми? – akuljana

Hai, обновленный ответ, пожалуйста, проверьте. – Sravan

<table> 
    <tr> 
     <td align="right">Search :</td> 
     <td><input ng-model="query" /></td> 
    </tr> 
    <tr> 
     <td align="right">Search By :</td> 
     <td> 
      <select ng-model="query"> 
       <option value="1">1</option> 
       <option value="2">2</option> 
       <option value="3">3</option> 
       <option value="4">4</option> 
      </select> 
     </td> 
    </tr> 
    </table> 
    <hr> 
    <div> 
    <table> 
     <tr ng-repeat="item in items | filter:query"> 
      <td>{{item.item}}</td> 
     </tr> 
    </table> 



    var employeeApp = angular.module("EmployeeApp",[]); 
    employeeApp.controller("empCtrl",function($scope){ 

    $scope.items = [{ 
     "item": "one", 
     "tags": "2,5" 
    }, { 
     "item": "two", 
     "tags": "3,4,6,7" 
    }, { 
     "item": "three", 
     "tags": "1,3,5" 
    }]; 
    $scope.orderProp="";     
    });

источник

2016-09-21 11:41:19

выбор не подходит, потому что пользователь может выбрать несколько тегов. – akuljana

Угловой фильтр с множеством значений

ответ

Смежные вопросы