Javascript 使用ng repeat筛选列表

我有一份清单如下

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

最初，当程序运行时，应向用户显示整个列表。然后通过另一个下拉列表，用户应该能够选择年龄。然后，根据所选年龄，应过滤列表并仅显示相关数据。请查找下面的代码

HTML

---

但此代码无法正常工作。arrayList的初始负载甚至不能正常工作。有人能帮我找出如何在ng repeat中过滤吗？提前感谢

您的自定义筛选功能应如下所示：

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

或者你可以这样做：

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

---

您的自定义筛选函数应如下所示：

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

或者你可以这样做：

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

---

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

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

---

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

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

---

始终使用angular library工具，我为其他用户举了一个例子，您的示例中也必须有唯一的搜索年龄您的选择选项中有2个年龄：2和2个年龄：4您应该解析2和4

var app=angular.moduleapp，[]； app.controllerctrl，函数$scope，$filter{ 风险值数据=[ {姓名：test1，年龄：2}， {姓名：test2，年龄：4}， {姓名：test3，年龄：2}， {姓名：test1，年龄：4} ] $scope.ages=[全部]； angular.forEachdata，functionitem{ var exist=$filterfilter$scope.ages，item.age，true[0]； ifangular.isUndefinedexist{ $scope.ages.pushitem.age } } $scope.items=数据； $scope.filter=函数{ $scope.items=数据； 如果$scope.search==全部{ $scope.items=数据； 返回false； } var find=$filterfilter$scope.items，{age:$scope.search}，true； console.log$scope.search $scope.items=find； } } {{item.name}}{{item.age}

---

始终使用angular library工具，我为其他用户举了一个例子，您的示例中也必须有唯一的搜索年龄您的选择选项中有2个年龄：2和2个年龄：4您应该解析2和4

var app=angular.moduleapp，[]； app.controllerctrl，函数$scope，$filter{ 风险值数据=[ {姓名：test1，年龄：2}， {姓名：test2，年龄：4}， {姓名：test3，年龄：2}， {姓名：test1，年龄：4} ] $scope.ages=[全部]； angular.forEachdata，functionitem{ var exist=$filterfilter$scope.ages，item.age，true[0]； ifangular.isUndefinedexist{ $scope.ages.pushitem.age } } $scope.items=数据； $scope.filter=函数{ $scope.items=数据； 如果$scope.search==全部{ $scope.items=数据； 返回false； } var find=$filterfilter$scope.items，{age:$scope.search}，true； console.log$scope.search $scope.items=find； } } {{item.name}}{{item.age}

---

谢谢你的回答。如果布尔标志为true，是否可以执行上述筛选@NTP@user3279893当然，您可以使用布尔标志更改outer if的内部。谢谢您的回答。如果布尔标志为true，是否可以执行上述筛选@NTP@user3279893当然，您可以使用布尔标志更改外部if的内部。