使用 ng-repeat 过滤列表

Question

我有一个列表如下

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

最初当程序运行整个列表应该显示给用户。然后通过另一个下拉菜单用户应该能够 select 年龄。然后根据 selected 年龄过滤列表并仅显示相关数据。请找到以下代码

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 中进行过滤？提前致谢

Answer 1

你的自定义过滤函数应该是这样的：

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

或者你可以这样做：

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

Answer 2

您的自定义过滤器的问题在于，您的自定义过滤器函数的参数是您列表中未选择的年龄值的一行。因此，使用以下内容更改您的自定义过滤器应该可以解决问题。

  $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;
      }
  }

Demo

Answer 3

始终使用 angular 图书馆工具，我为其他用户举了一个例子，而且你必须在你的样本中有独特的搜索年龄你有 2 age: 2 和 2 age: 4在您的 select 选项中，您应该解析 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>

使用 ng-repeat 过滤列表

Filter a list with ng-repeat

javascript

filter

angularjs

angularjs-ng-repeat