角度:搜索器(过滤器）根据数据类型工作不同

Angular: searcher(filters) working different depending on data type

本文关键字：数据类型 工作 搜索器 过滤器 角度      更新时间：2023-09-26

让我们快速完成，我这里有 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;
相关文章：