Фильтр "пользовательских значений" в AngularJS ng-repeat - PullRequest
Новая
       16

Фильтр "пользовательских значений" в AngularJS ng-repeat

0 голосов
/ 11 октября 2019

Мне нужно отфильтровать список по их категориям, но каждая из этих категорий является пользовательской, каждый пользователь может написать в списке любую категорию, которую он хочет.

Я попытался создать список с помощью ng-repeat вкоторый я отфильтровал все дублирующиеся значения (в приведенном ниже коде уникально: 'Category' часть), и я дал им имя категории в качестве значения для фильтрации, также я добавилкатегория «Все», чтобы показать все элементы: 

<ul class="categoriesList">
  <li>
    <label>
      <input type="radio" ng-model="searchCategory.Category" value=""> All
    </label>
  </li>
  <li ng-repeat="x in myList | unique:'Category'">
    </label>
      <input type="radio" ng-model="searchCategory.Category" value="{{x.Category}}"> {{x.Category}}
    </label>
  </li>
</ul>

Но этот подход не работает. Я сделал Plunker в качестве примера: Вот мой plunker

Мне нужно иметь возможность добавить любую категорию, которую я хочу в примере json, и бытьв состоянии отфильтровать их. Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 11 октября 2019

Вы должны написать атрибут Ex- name = "rdoCategory" для переключателя 

`<ul class="categoriesList">
      <li>
        <label>
          <input type="radio" name="rdoCategory" ng-model="searchCategory.Category" value=""> All
        </label>
      </li>
      <li ng-repeat="x in myList | unique:'Category'">
        </label>
          <input type="radio" name="rdoCategory" ng-model="searchCategory.Category" value="{{x.Category}}"> {{x.Category}}
        </label>
      </li>
    </ul>`

После этого он будет работать.

0 голосов
/ 11 октября 2019

OK, проблема с вашим кодом заключалась в том, что ваше свойство searchCategory не было определено в $scope. Добавление $scope.searchCategory = {}; к вашему контроллеру решит проблему. И причина этого в том, что ng-repeat создает свою собственную дочернюю область. Ниже приведен фрагмент с рабочим решением.

Также отсутствовала еще одна вещь, т.е. вам необходимо иметь одну и ту же группу для всех переключателей, чтобы можно было выбрать только одну, и сделать это, добавив атрибут name='filter' для всех переключателей. 

var app = angular.module('app', []);

//duplicates filter
app.filter('unique', function() {
  return function(items, filterOn) {
    if (filterOn === false) {
      return items;
    }

    if ((filterOn || angular.isUndefined(filterOn)) && angular.isArray(items)) {
      var hashCheck = {},
        newItems = [];
      var extractValueToCompare = function(item) {
        if (angular.isObject(item) && angular.isString(filterOn)) {
          return item[filterOn];
        } else {
          return item;
        }
      };
      angular.forEach(items, function(item) {
        var valueToCheck, isDuplicate = false;
        for (var i = 0; i < newItems.length; i++) {
          if (angular.equals(extractValueToCompare(newItems[i]), extractValueToCompare(item))) {
            isDuplicate = true;
            break;
          }
        }
        if (!isDuplicate) {
          newItems.push(item);
        }
      });
      // items = newItems;
    }
    return newItems;
  };
});

app.controller('MainCtrl', function($scope) {
  $scope.searchCategory = {};
  $scope.myList = [{
      "Category": "My custom category",
      "Title": "Title example",
      "Comments": "Example comments"
    },
    {
      "Category": "My custom category",
      "Title": "My cat is named George",
      "Comments": "Example comments"
    },
    {
      "Category": "My custom category",
      "Title": "Hocus pokus",
      "Comments": "Example comments"
    },
    {
      "Category": "My custom category",
      "Title": "Tyrion Lannister must have been king",
      "Comments": "Example comments"
    },
    {
      "Category": "My custom category",
      "Title": "some text",
      "Comments": "Example comments"
    },
    {
      "Category": "Some new category",
      "Title": "7 projects going LIVE now",
      "Comments": "Example comments"
    },
    {
      "Category": "Some new category",
      "Title": "Batman vs Superman was a good movie",
      "Comments": "Example comments"
    },
    {
      "Category": "Some new category",
      "Title": "Youtube channel projects",
      "Comments": "Example comments"
    },
    {
      "Category": "Some new category",
      "Title": "Some project name",
      "Comments": "Example comments"
    },
    {
      "Category": "Some new category",
      "Title": "projects (more)",
      "Comments": "Example comments"
    },
    {
      "Category": "A different category",
      "Title": "Remember, remember the fifth of november",
      "Comments": "Hello there!"
    },
    {
      "Category": "A different category",
      "Title": "It's night, electric night",
      "Comments": "General Kenobi"
    },
    {
      "Category": "Custom category",
      "Title": "project name again",
      "Comments": "Example comments"
    }
  ];

});
<!DOCTYPE html>
<html ng-app="app">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Filter with custom values</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <ul class="categoriesList">
    <li>
      <label>
          <input name="filter" type="radio" ng-model="searchCategory.Category" ng-value=""> All
        </label>
    </li>
    <li ng-repeat="x in myList | unique:'Category'">
      <label>
          <input name="filter" type="radio" ng-model="searchCategory.Category" ng-value="x.Category"> {{x.Category}}
        </label>
    </li>
  </ul>

  <div class="wrapper" ng-repeat="y in myList | filter:searchCategory:true">
    <ul class="click-text">
      <li>{{y.Title}} - {{y.Comments}}</li>
    </ul>
  </div>
</body>

</html>

Надеюсь, это поможет:)

...