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

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"，我不建议使用名称作为属性键，很难在 ng-repeat 中引用它们，因为两者对象具有不同的键（"John" 和 "Peter"），因此从技术上讲它们不是同一类对象

编辑#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 查询过滤器

AngularJS ng-repeat query filter not show for nested object

javascript

angularjs

angularjs-ng-repeat

angularjs-filter