使用 ng-repeat 过滤列表答案

【问题标题】：Filter a list with ng-repeat使用 ng-repeat 过滤列表
【发布时间】：2020-02-05 07:28:00
【问题描述】：

我有一个列表如下

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

【问题讨论】：

标签： javascript angularjs filter angularjs-ng-repeat

【解决方案1】：

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

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

或者你可以这样做：

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

【讨论】：

【解决方案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

【讨论】：

感谢您的回答。如果布尔标志为真@NTP，我可以执行上述过滤器吗
@user3279893 当然，如果使用布尔标志，您可以更改外部的内部。

【解决方案3】：

总是使用角度库工具，我为其他用户举了一个例子，你也必须在你的样本中有独特的搜索年龄你有 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>

【讨论】：