Javascript-форум (https://javascript.ru/forum/)
-   Angular.js (https://javascript.ru/forum/angular/)
-   -   Фильтр в ng-repeat (https://javascript.ru/forum/angular/71856-filtr-v-ng-repeat.html)

One_Two 18.12.2017 03:02
Фильтр в 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>

One_Two 18.12.2017 10:33
Получилось! Доделал :)
Нужно не ретурнить исход условия в свитче, а присваивать переменной (flag) и сравнивать на && с последующим значением. И в конце возвращать flag;
Вдруг кому пригодится, оставлю тут.

<!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){
        var flag = true;
        for (var i = 0; i < $scope.advs.length; i++){
            switch ($scope.advs[i].queryType) {
                case 1:
                    flag = flag && user.fullname.toLowerCase().indexOf($scope.advs[i].search.toLowerCase()) != -1;
                    break;
                case 2:
                    flag = flag && user.fullname === $scope.advs[i].search;
                    break;
                case 3:
                    flag = flag && !(user.fullname.toLowerCase().indexOf($scope.advs[i].search.toLowerCase()) != -1); 
                    break;
                default:
                    break;
            }
        }
        return flag;
    } 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>

рони 18.12.2017 12:38
angular ng-repeat filter
 
One_Two,
вариант фильтрации

<!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() {
  var pattern = $scope.currentAdv.search, flags = "i", except = false;
  if ($scope.currentAdv.queryType == 2) {flags = "";}
  if ($scope.currentAdv.queryType == 3) {except = true;}
  var reg = new RegExp(pattern, flags);
  $scope.advs.push({reg:reg, except:except, search:pattern});
  $scope.currentAdv.search = "";
  $scope.currentAdv.queryType = "1";
};

$scope.advUserFilter = function(user) {
  return $scope.advs.every(function(filter) {
    return filter.except ^ filter.reg.test(user.fullname);
  });
};

})
</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>


Часовой пояс GMT +3, время: 01:43.