在多个阵列中的AngularJS过滤

我试图在对象列表上应用过滤器，但我无法设法使其工作。我读过AngularJS不提供“开箱即用”的多重对象过滤，可能这就是为什么它不起作用？在多个阵列中的AngularJS过滤

这里是我的代码：

<div class="list list-inset"> 
    <label class="item item-input" id="events-search"> 
     <i class="icon ion-search placeholder-icon"></i> 
     <input type="text" placeholder="Rechercher parmis les evenements" ng-model="nsearch"> 
    </label> 
</div> 

<div class="list"> 

    <a class="item item-thumbnail-left" href="#" ng-repeat="info in infos | filter:nsearch"> 
     <img src="xxx"> 
     <h2>{{ info.name }}</h2> 
     <p>{{ info.date}} à {{ info.hour }}</p> 
    </a> 

</div>

例如， “相关信息” 的价值会是这样的：

 
Q5PAvIQ2x8TLNkZmhTr59s984ALI5s10 { 
    name: "This is an event", 
    ... 
}, 
jj8oB6WemYVsGZ1FSm31DFBtSlM0pfZK { 
    name: "This is a second event", 
    ... 
}

我试图通过名字来进行筛选。

有没有人有想法？...谢谢！

来源

2015-10-04 Crazyman60

您是否在问如何通过一个或多个属性值过滤JavaScript对象列表？ –

对不起如果我的问题不清楚。我想过滤其中有多个objets的数组，实际上，我的数组像{{id1：{name：“name”}，id2：{name：“name”}}，但我看到的每个AngularJS示例都是{name：“name”，name：“name”}，你明白我的意思了吗？ – Crazyman60

如果您的数据位于哈希表而非实际数组中，那么您需要使用密钥，acc表示值在NG重复咝声数据：

<a class="item item-thumbnail-left" href="#" ng-repeat="(key, value) in searchedInfos()"> 
     <h2>{{ value.name }}</h2> 
</a>

在这种布置角度的过滤器不能简单地应用于非阵列集，所以你对你的范围创建自定义过滤功能，其将采取它的值从输入：

<input type="text" ng-model="view.searchStr"/>

和范围：

$scope.infos = { 
    Q5PAvIQ2x8TLNkZmhTr59s984ALI5s10: { 
     name: "This is an event" 
    }, 
    jj8oB6WemYVsGZ1FSm31DFBtSlM0pfZK: { 
     name: "This is a second event" 
    } 
}; 

$scope.view = { 
    searchStr : "" 
} 

$scope.searchedInfos = function(){ 

    var searched = {}; 

    if ($scope.view.searchStr) { 

     angular.forEach($scope.infos, function(value, key){ 

      if (value.name.toLowerCase().indexOf($scope.view.searchStr.toLowerCase()) != -1) { 

       searched[key] = value; 

      } 
     }); 

    } 

    else { 

     searched = $scope.infos; 
    } 

    return searched; 
}

Here is a working fiddle

来源

2015-10-04 13:00:33 XGreen

谢谢你非常详细的例子，不幸的是，即使经过1小时试图知道我可能做错了什么。在每一种情况下“$范围。searchedInfos”之称，在‘其他’的语句总是被调用，即使我打字的东西不匹配模式.. 也许是因为我使用AngularJS在离子？（科尔多瓦） – Crazyman60

也许你有我已经更新了在模型中使用点符号的答案，以便解决这些可能的问题。再试一次 – XGreen

哇，伙计，非常感谢，它的工作就像一个魅力......你能解释我为什么它没有工作吗？我看到你已经在“searchStr”之前放了一个“参数”，但我不明白为什么它不工作。反正，再次感谢兄弟 – Crazyman60

正如它的名字是在重复可变和不可用的，你可以通过索引

<h2>{{ info[0].name }}</h2> 
     <p>{{ info[0].date}} à {{ info[0].hour }}</p>

引用你的“这样的” JSON数组，你可能需要一个逗号

[Q5PAvIQ2x8TLNkZmhTr59s984ALI5s10 , { 
    name: "This is an event", 
...}, 
jj8oB6WemYVsGZ1FSm31DFBtSlM0pfZK , { 
    name: "This is a second event", 
...}, 

...]

，每个信息元素将只有1个元素，并且可以用[0]引用

来源

2015-10-04 12:52:38 Kickaha

数据不一定需要在数组中。散列表是ng-repeat的有效案例。你不应该强制数据进入数组，除非你有一个合理的理由 – XGreen

@XGreen ..哈希表好吧，泰..指出。 – Kickaha

如果信息将是一个对象数组，并且您希望根据名称而不是系统中的所有对象变量进行过滤，所以您只需将搜索变量转换为对象，但在其中使用相同的变量名称要与

在你的代码

搜索你只需要转换输入的NG-模型是这样

<input type="text" placeholder="Rechercher parmis les evenements" ng-model="nsearch.name">

并完成代码的其余部分，因为它是

来源

2015-10-04 16:10:40

谢谢，但已经尝试过，这是在你没有数据之前没有“钥匙”的情况下工作。 – Crazyman60

在多个阵列中的AngularJS过滤

回答

相关问题