让我们快速完成,我这里有 2 个示例,我想让您看到并告诉我为什么一个有效而另一个不起作用。
这是我刚刚从应用程序中提取的具有真实 JSON 的那个,这是不起作用的那个:http://plnkr.co/edit/2Z5SMlANCGd3r4Trfwzm?p=preview
我有一个工作正常但没有真正的 json:http://plnkr.co/edit/su8CD9L01XMXowCkXcel?p=preview
现在,如果您能够看到错误,我想要实现的行为是第二个 Plunkr 上的行为,那个上一切都是正确的,但我不知道为什么第一个具有真实信息的行为不起作用。
<div ng-app="myApp">
<div ng-controller="TestController">
<input type="search" placeholder="Search" ng-model="query" />
<div ng-repeat="sport in sports | filter:{$: query}" ng-show="sport.leagues.length">
<div>
<strong>{{sport.name}}</strong>
</div>
<div class="item item-button-right" ng-repeat="league in sport.leagues" on-tap="goToLines(league)">
{{league.name}}
</div>
</div>
</div>
</div>
$scope.sports
数组的结构不同。
在#1中,您有:
[{
"0": {
"name": "Basketball",
"leagues": {[
...
在#2中,您有:
[
{
"name": "Basketball",
"leagues": [{
...
因此,您的语句ng-show="sport.leagues.length"
在#1中不起作用。
调整ng-show
或从$scope.sports
数组中删除索引并像 #2 一样构建它。
你必须改变两行。
Line 5: $scope.sports = {
Line 298: };
删除 [] 括号可以解决您的问题。因为在不起作用的情况下,您在另一个数组中具有类似于数组的东西(实际上它是一个对象,但在这种情况下并不重要)。
过滤器过滤器仅适用于数组。您的第一个数据结构不是数组。
从文档中
从 [array] 中选择项的子集并将其作为新数组返回
其中 [array] 的类型为 Array。正如评论中已经指出的那样,数据结构似乎很奇怪,无论是否带有额外的括号。
更新
如果要在客户端将结构转换为数组,可以执行以下操作:
var newArray = [];
for (var key in $scope.sports) {
newArray.push($scope.sports[key]);
}
$scope.sports = newArray;