ng-repeat中的Angular Js對象過濾器

Question

如何根據對象值（例如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>

Answer 1

我認為您無法篩選屬性名稱。 我假設這些屬性名稱是您要過濾的某種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>

用包含要查找的ID的特定范圍變量替換searchId 。

Answer 2

filter和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>

ng-repeat中的Angular Js對象過濾器

問題描述

2 個解決方案

解決方案1
0 2016-03-10 13:58:19

解決方案2
0 已采納 2016-03-10 14:15:22

ng-repeat中的Angular Js對象過濾器

問題描述

2 個解決方案

解決方案1 0 2016-03-10 13:58:19

解決方案2 0 已采納 2016-03-10 14:15:22

解決方案1
0 2016-03-10 13:58:19

解決方案2
0 已采納 2016-03-10 14:15:22