Показать сообщение отдельно
  #1 (permalink)  
Старый 18.12.2017, 03:02
Интересующийся
Отправить личное сообщение для One_Two Посмотреть профиль Найти все сообщения от One_Two
 
Регистрация: 20.11.2017
Сообщений: 10

Фильтр в ng-repeat
Всем привет!

Очень прошу помощи, разобраться в фильтре.
Есть список пользователей, к нему хочу сделать фильтр с условиями по типу "точное вхождение", "вхождение" и "кроме".
Создаю массив с объектами-пользователями и массив с условиями фильтрации, создаю инпут поле "что отсеять" и радио кнопки "как отсеять".
Далее передаю каждого пользователя (ng-repeat) в функцию и проверяю в цикле массив с условиями, к какому он подходит, и возвращается true/false (показывать/не показывать).
Суть в том, что условий может быть несколько по задумке, но у меня проверяется только первый объект с условиями, а дальнейшие игнорируются
Наглядный пример ниже, пробую отфильтровать пользователей по вхождению "Козлов" - работает, потом ещё задаю фильтр "Кроме":"Козлов Виктор Петрович". На экране Козлов Виктор Петрович всё равно остается.. Весь мозг сломал уже((
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script>
angular.module('myApp', []);
angular.module('myApp').controller('Ctrl', function($scope) {
	$scope.users = [
  {
  	fullname: 'Козлова Виктория Павловна'
  },
  {
  	fullname: 'Козлов Виктор Петрович'
  },
  {
  	fullname: 'Афанасьев Геннадий Сергеевич'
  },
  {
    fullname: 'Козлова Виктория Сергеевна'
  }
  ];
  
  $scope.advs = [];
  $scope.currentAdv = {};
  $scope.currentAdv.search = '';
  $scope.currentAdv.queryType = '1';
  
  $scope.addAdvSearch = function(){
            $scope.currentAdv.queryType =+ $scope.currentAdv.queryType;
            var copyAdv = angular.copy($scope.currentAdv);
            $scope.advs.push(copyAdv);
  	console.log($scope.advs);
    $scope.currentAdv.search = '';
    $scope.currentAdv.queryType = '1';
  };

  $scope.advUserFilter = function(user){
    if($scope.advs.length > 0){
        for (var i = 0; i < $scope.advs.length; i++){
            switch ($scope.advs[i].queryType) {
                case 1:
                    return user.fullname.toLowerCase().indexOf($scope.advs[i].search.toLowerCase()) != -1;
                    break;
                case 2:
                    return user.fullname === $scope.advs[i].search;
                    break;
                case 3:
                    return !(user.fullname.toLowerCase().indexOf($scope.advs[i].search.toLowerCase()) != -1); 
                    break;
                default:
                    break;
            }
        }
    } else {
        return true;
    }
}
  
})
</script>
</head>
<body>
    <div ng-app="myApp">
        <div ng-controller="Ctrl">
          <button ng-click="adv = ! adv">Добавить условие</button>
          <div>
            <ul ng-repeat="user in users | filter:advUserFilter">
              <li>{{user.fullname}}</li>
            </ul>
          </div>
          
          <div ng-show="adv">
            <input type="text" ng-model="currentAdv.search" ng-init="search=''">
            <input type="radio" name="query" ng-model="currentAdv.queryType" value="1" default>
            <label for="query">Вхождение</label>
            <input type="radio" name="query" ng-model="currentAdv.queryType" value="2">
            <label for="query">Точное вхождение</label>
            <input type="radio" name="query" ng-model="currentAdv.queryType" value="3">
            <label for="query">Кроме</label>
            <button ng-click="addAdvSearch()">Добавить</button><br>
            <span>Добавленные фильтры</span>
            <ul ng-repeat="adv in advs">
                <li>{{adv.search}}</li>
            </ul>
          </div>
        </div>
      </div>
</body>
</html>
Ответить с цитированием