ng-repeat中的Angular Js对象过滤器

Angular Js Object Filter in ng-repeat

本文关键字：对象 过滤器 Js Angular 中的 ng-repeat      更新时间：2023-09-26

如何根据对象值（如 1、2 或 3）进行过滤

我正在尝试过滤我的 JSON 它看起来类似于名称对象

这是我的代码，我试图应用过滤器，但它不起作用

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
  <li ng-repeat="x in names ">
    {{ x.name }}
  </li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = {
  "1": {
       "name": "some"
  },
  "2": {
       "name": "values"
  },
  "3": {
        "name": "are"
  },
  "4": {
       "name": "there"
  },
  "5": {
        "name": "here"
  }
}
});
</script>
</body>
</html>

filter and orderBy 不处理对象属性，只处理数组。话虽如此，我想我找到了一个您会喜欢的解决方案： 

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<input type="text" ng-model="searchText"/>
<ul ng-init="nameArray=objArray(names)">
  <li ng-repeat="x in nameArray | filter:searchText">
    {{x.value.name}}
  </li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.searchText='';
    $scope.names = {
  "1": {
       "name": "some"
  },
  "2": {
       "name": "values"
  },
  "3": {
        "name": "are"
  },
  "4": {
       "name": "there"
  },
  "5": {
        "name": "here"
  }
    };
$scope.objArray=function (obj) {
    var result=[];
    for (var key in obj) {
        result.push({
            key: key,
            value: obj[key]
        });
    }
    return result;
}

});
</script>
</body>
</html>

我认为您无法过滤属性名称。我假设这些属性名称是您要过滤的某种 ID。然后，您的数据结构应该反映这一点，如下所示：

$scope.names = [
    { id: "1", name: "some" },
    { id: "2", name: "values" },
    { id: "3", name: "are" },
    { id: "4", name: "there" },
    { id: "5", name: "here" }
]

然后你可以像这样过滤：

<ul>
  <li ng-repeat="x in names | filter: { id: searchId } >
    {{ x.name }}
  </li>
</ul>

将searchId替换为包含要查找的 ID 的特定范围变量。

相关文章：