Фильтр множественного выбора для объекта, разделенного запятыми

Используя angularjs, я хочу иметь несколько флажков, при установке которых они применяют фильтр к данным на основе любого количества выбранных «тегов». Свойство tag содержит значения, разделенные запятыми. Каждое значение будет присвоено флажку.

Флажки: Shoulder, Knee, Hand, Foot, Core Stability, Back

Данные: { "id": "2", "name": "Neutral Spine on Gym Ball - Single Leg and Arm Lift ", "perform_set": "3", "perform_rep": "20", "perform_rest": "30 sec", "tags": ["Shoulder","Core Stability","Back"] },

У меня есть около 4000 записей, которые структурированы таким образом. Я открыт для размещения тегов по-другому, они не были добавлены к данным. В идеале мне нужно сделать это правильно с самого начала, так как ввод их для каждого упражнения займет довольно много времени.

Спасибо заранее.


javascript json html filter angularjs
person Taylorsuk    schedule 08.12.2014    source источник
comment
"tags": "Shoulder","Core Stability","Back", - синтаксическая ошибка...   -  person PSL    schedule 08.12.2014
comment
Вопрос по вашей фильтрации. Вы хотите, чтобы фильтры работали как И или ИЛИ? Если я выберу фильтры Плечо и Колено, должен ли ваш результат по-прежнему отображаться, поскольку он удовлетворяет одному из критериев фильтра, или он будет скрыт, поскольку не соответствует всем критериям фильтра.   -  person KreepN    schedule 09.12.2014
comment
Они должны быть фильтрами по И, поэтому, если кто-то искал упражнение, предназначенное как для спины, так и для плеч, результат будет отображаться для обоих. Идеальным является то, что конкретное упражнение отображается как фильтр покупок на Amazon.   -  person Taylorsuk    schedule 09.12.2014

Ответы (2)


arrow_upward
2
arrow_downward

Должно быть то, что вы хотите, основываясь на вашем комментарии ко мне в вопросе:

(Игнорируйте приведенный ниже фрагмент, так как мне требуется ссылка на plnkr)

http://plnkr.co/edit/Xg7tGAQvBy3C6PjNROSH?p=preview

введите здесь описание изображения

$scope.ApplyFilter = function() {
   $scope.FilteredData = $scope.Data;
   for (var i = 0; i < $scope.ActiveFilters.length; i++) {
      $scope.FilteredData = $filter('filter')($scope.FilteredData, $scope.ActiveFilters[i], undefined);
   }
    };
person KreepN    schedule 09.12.2014
comment
Фантастика, спасибо большое!! 90% пути туда... Я получаю какое-то странное поведение, поскольку фильтр применяется, когда я снимаю флажок. Также я могу ограничить результаты/отображаемые результаты, так как производительность с 4000 элементов немного ниже. - person Taylorsuk; 10.12.2014
comment
@Taylorsuk Вам придется ограничить количество записей, передаваемых в функцию фильтра, например: $filter('filter')(Get500Records($scope.FilteredData),... Много раз выполняется ограничение результатов на стороне сервера. - person KreepN; 10.12.2014
comment
Можете ли вы пролить свет на то, почему это работает, когда я снимаю флажок, а не устанавливаю его? - person Taylorsuk; 10.12.2014
comment
@Taylorsuk Ссылка, которую я связал, должна работать, когда вы выбираете поле. Вы заметите, что вызов AddFilter проверяет наличие выбранного перед добавлением его в массив фильтров. - person KreepN; 10.12.2014
comment
Действительно, планк работает отлично, но почему-то моя реализация работает при снятии выделения... Я продолжу экспериментировать. Большое спасибо, что нашли время, чтобы дать мне решение. - person Taylorsuk; 10.12.2014
comment
Я изменил ng-click на ng-change, и теперь он работает отлично... Я вижу, что это задокументировано здесь docs.angularjs.org/api/ng/directive/ngChange - person Taylorsuk; 11.12.2014

arrow_upward
0
arrow_downward

Ниже приведен некоторый псевдокод, представляющий лишь один из многих способов сделать это.

    <input type="checkbox" ng-model='filters.neck'>
    <input type="checkbox" ng-model='filters.leg'>

   <tr ng-repeat="data in yourdata | filter: filteredData(data)">

    $scope.filters = {"neck":false,"leg":false}
    $scope.currentFilters = [];
    $scope.$watch("filters",$scope.setFilters,true);

    $scope.setFilters = function() {
       // Something changed. Construct an arrow that containers the items to filter
       // e.g. $scope.currentFilters = ["neck"] because neck is checked
    };

    $scope.filtereddata = function (item) {
      var ret = false;
      if(item.currentFilters contains one of the items in item.tags ) {
         ret = true;
      } 
      return ret;
    };
person Scott    schedule 08.12.2014