Question

我有以下数据，如何查询"talent"下的字符串？

我使用ng-Repeat='friend in friends'，但无法搜索talent下的数据。

例如：当我输入piano时，我希望它显示John节点。

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-example98-production</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>

<body ng-app="">
  <div ng-init='friends = {
    "John-JqI-o4tusIKK1psPJw4": {
        "habits": "guitar",
        "job": "teacher",
        "name": "John",
        "talents": {
            "aaa": {
                "rating": "high",
                "talent": "piano"
            },
            "bbb": {
                "rating": "beginner",
                "talent": "playing"
            }
        }
    },
    "Peter-JqI9Svtr2fQLyJoMmyZ": {
        "habits": "reading",
        "job": "student",
        "name": "Peter",
        "talents": {
            "ccc": {
                "rating": "beginner",
                "talent": "CAM"
            },
            "ddd": {
                "rating": "advanced",
                "talent": "Typing"
            }
        }
    }
}'></div>

  <label>Search:
    <input ng-model="searchText">
  </label>
  <table id="searchTextResults">
    <tr>
      <th>Name</th>
      <th>talents</th>
    </tr>
    <tr ng-repeat="friend in friends | filter:searchText">
      <td>{{friend.name}}</td>
      <td>{{friend.talents}}</td>
    </tr>
  </table>

编辑：我已将哈希密钥恢复到Peter节点。

Answer 1

过滤器过滤器适用于数组而不是对象，请参阅相关文档：https://docs.angularjs.org/api/ng/filter/filter

正如您所看到的，将其转换为数组可以按预期工作：

http://plnkr.co/edit/rAQrt0jKB5VgcEHEIi45?p=preview

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example98-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  </head>
  
<body ng-app="">
  <div ng-init='friends = [{
    "habits": "guitar",
    "job": "teacher",
    "name": "John",
    "talents": {
        "aaa": {
            "rating": "high",
            "talent": "piano"
        },
        "bbb": {
            "rating": "beginner",
            "talent": "playing"
        }
    }
},
   {
    "habits": "reading",
    "job": "student",
    "name": "Peter",
    "talents": {
        "ccc": {
            "rating": "beginner",
            "talent": "CAM"
        },
        "ddd": {
            "rating": "advanced",
            "talent": "Typing"
        }
    }
}]'></div>

<label>Search: <input ng-model="searchText"></label>
<table id="searchTextResults">
  <tr><th>Name</th><th>talents</th></tr>
  <tr ng-repeat="friend in friends | filter:searchText">
<td>{{friend.name}}</td>
<td>{{friend.talents}}</td>
  </tr>
</table>
</body>
</html>

编辑：

我删除了“John”和“Peter”两个键，我不建议使用名称作为属性键，因为两个对象都有不同的键（“John”和“John”，所以很难在ng-repeat中引用它们。 “彼得”），所以他们在技术上不是同一种物体

编辑＃2：

如果你真的想拥有2个不同的密钥，你可以使用这个（非常难看的）解决方案：

http://plnkr.co/edit/rAQrt0jKB5VgcEHEIi45?p=preview

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example98-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  </head>
  
<body ng-app="">
  <div ng-init='friends = [{
  "John" : {
    "habits": "guitar",
    "job": "teacher",
    "name": "John",
    "talents": {
        "aaa": {
            "rating": "high",
            "talent": "piano"
        },
        "bbb": {
            "rating": "beginner",
            "talent": "playing"
        }
    }
}},
{"Peter" : {
    "habits": "reading",
    "job": "student",
    "name": "Peter",
    "talents": {
        "ccc": {
            "rating": "beginner",
            "talent": "CAM"
        },
        "ddd": {
            "rating": "advanced",
            "talent": "Typing"
        }
    }
}}]'></div>

<label>Search: <input ng-model="searchText"></label>
<table id="searchTextResults">
  <tr><th>Name</th><th>talents</th></tr>
  <tr ng-repeat="friend in friends | filter:searchText">
<td ng-if="friend.John">{{friend.John.name}}</td>
<td ng-if="friend.Peter">{{friend.Peter.name}}</td>
<td ng-if="friend.John">{{friend.John.talents}}</td>
<td ng-if="friend.Peter">{{friend.Peter.talents}}</td>
  </tr>
</table>
</body>
</html>

AngularJS ng-repeat查询过滤器不显示嵌套对象

1 个答案: