Фильтровать список с помощью ng-repeat - PullRequest
Новая
       42

Фильтровать список с помощью ng-repeat

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

У меня есть следующий список 

$scope.arrayList = [
   {"name": "test1", "age":2},
   {"name": "test2", "age":4},
   {"name": "test3", "age":2},
   {"name": "test1", "age":4}
]

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

HTML 

<div ng-repeat="array in arrayList | filter:filterByAge">{{array}}</div>

<select ng-model="selAge">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

контроллер 

$scope.filterByAge = function(selectedAgeVal)
{
    if($scope.arrayList.age ==selectedAgeVal)
    {
        $scope.arrayList;
        return true;
    }
    else
    {
        return false;
    } 
}

Но этот код работает неправильно. Начальная загрузка arrayList даже не работает должным образом. Кто-нибудь может мне помочь разобраться, как фильтровать в ng-repeat? Заранее спасибо

Ответы [ 3 ]

3 голосов
/ 08 октября 2019

Ваша пользовательская функция фильтра должна быть такой: 

$scope.filterByAge = function(selectedAgeVal) {
  return selectedAgeVal.age == $scope.selAge;
}

Или вы можете просто сделать: 

<div ng-repeat="array in arrayList | filter: {age: selAge}">{{array}}</div>
1 голос
/ 08 октября 2019

Проблема с вашим пользовательским фильтром заключается в том, что параметром вашей пользовательской функции фильтра является строка из вашего списка, а не выбранное значение возраста. Таким образом, изменение пользовательского фильтра следующим образом должно решить проблему. 

  $scope.filterByAge = function(row)
  {
      if(row.age == $scope.selAge)
      {
          return true;
      }
      else
      {
          return false;
      } 
  }

Для отображения всего списка при запуске вы можете добавить нулевую проверку. 

 $scope.filterByAge = function(row)
  {
      if($scope.selAge != undefined){
          if(row.age == $scope.selAge)
          {
              return true;
          }
          else
          {
              return false;
          } 
      }
      else{
        return true;
      }
  }

Демо

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

Всегда используйте инструменты угловой библиотеки, я привожу пример для других пользователей, также вы должны иметь уникальные возрасты для поиска в вашем примере, у вас есть 2 age: 2 и 2 age: 4 в вашей опции выбора, вы должны проанализировать 2 и 4 

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

app.controller("ctrl", function($scope, $filter) {

  var data = [
    {"name": "test1", "age":2},
    {"name": "test2", "age":4},
    {"name": "test3", "age":2},
    {"name": "test1", "age":4}
   ]
   
   $scope.ages = ["all"];
   
   angular.forEach(data, function(item){
      var exist = $filter("filter")($scope.ages, item.age, true)[0];
      if(angular.isUndefined(exist)){
        $scope.ages.push(item.age)
      }
   })

   $scope.items = data;

   $scope.filter = function(){
       $scope.items = data;
       if($scope.search === "all"){
          $scope.items = data;
          return false;
       }
       var find = $filter("filter")($scope.items, {age: $scope.search}, true);
       console.log($scope.search)
       $scope.items = find;
   }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <select ng-model="search" ng-change="filter()" ng-options="option as option for option in ages"></select>
  
  <ul>
    <li ng-repeat="item in items">
      {{item.name}} | {{item.age}}
    </li>
  </ul>
</div>
...