Question

让我们快点做，我在这里有两个例子，我希望你看到并告诉我为什么一个人在工作而另一个人没有。

这是一个真正的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>

Answer 1

$scope.sports数组的结构不同。

在＃1中你有：

[{
    "0": {
        "name": "Basketball",
        "leagues": {[
...

在＃2中你有：

[
    {
        "name": "Basketball",
        "leagues": [{
...

所以你的陈述ng-show="sport.leagues.length"将无法在＃1中使用。

调整ng-show或从$scope.sports数组中删除索引并将其构建为＃2。

Answer 2

你必须改变两行。

Line 5:  $scope.sports = {
Line 298: };

删除[]括号可以解决您的问题。因为在不起作用的情况下，你在另一个数组中有类似于数组的东西（实际上它是一个对象但在这种情况下并不重要）。

Answer 3

过滤器过滤器仅适用于阵列。您的第一个数据结构不是数组。

来自docs

从[array]中选择项目的子集并将其作为新数组返回

其中[array]的类型为Array。正如评论中已经指出的那样，数据结构似乎很奇怪，有或没有附加括号。

更新

如果要在客户端将结构转换为数组，可以执行以下操作：

var newArray = [];
for (var key in $scope.sports) {
  newArray.push($scope.sports[key]);
}
$scope.sports = newArray;

Angular：搜索器（过滤器）根据数据类型的不同而工作

3 个答案:

更新