在ng-init中添加过滤器

时间:2015-02-11 18:16:25

标签: angularjs angularjs-ng-repeat angularjs-ng-init

<input ng-model="search.name" placeholder="Name" />

<tbody>
<div ng-init="FilteredGeojson = ho|filter:search">
<tr ng-repeat="hf in FilteredGeojson">
    <td>{{ hf.name }}</td>   
</tr>
</div>
</tbody>
</table>
<div leaflet-directive id="map" data="FilteredGeojson"></div>

如果可能的话,在ng-init中进行过滤非常重要,但我无法解决它,我无法进行ng-repeat并创建我传递给我的指令的范围,因为它启动了无限的摘要循环。

3 个答案:

答案 0 :(得分:13)

您问题的答案

由于hofilter:search不同,您的代码段不起作用。在

ng-init="FilteredGeojson = ho | filter:search"

...分配FilteredGeojson = ho在应用过滤器| filter:search之前完成,但不起作用。

您需要封装过滤值,如下所示:

ng-init="FilteredGeojson = (ho | filter:search)"

另外

  

在ng-init中进行过滤非常重要

重要的是什么? ngInit指令只会在那里调用一次,因此当您更新过滤器时,ngRepeat中的项目将不会更新。但你需要这个,对吗?

要实现这一点,您应该在ngRepeat指令中添加过滤器,如下所示:

<tr ng-repeat="hf in FilteredGeojson | filter:search">
    <td>{{ hf.name }}</td>   
</tr>

实施例

这两种解决方案均可在this plnkr example中找到。

答案 1 :(得分:0)

您在这里不需要ng-init,而是ng-repeat的即兴使用。
这是更新的plnkr

这是plnkr中的index.html。

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link href="style.css" rel="stylesheet" />
  <script data-semver="1.3.13" src="https://code.angularjs.org/1.4.8/angular.js" data-require="angular.js@1.3.x"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">

  FilteredGeojson.length :- {{FilteredGeojson.length}}
  <br>
  <input ng-model="search" placeholder="Name" /> {{ search }}
  <table >
    <tr ng-repeat="item in (FilteredGeojson = (Geojson | filter:search))">
      <td>{{ item.name }}</td>
    </tr>
  </table>
</body>


</html>
使用输入框更改范围上的FilteredGeojson变量时,将更新

search。我更新了plnkr以显示这一点。

此外,如果Geojson数组是长数组,则可以像这样使用limitTo过滤器。

<tr ng-repeat="item in (FilteredGeojson = (Geojson | filter:search)) | limitTo: 5">

让我知道它是否有帮助。

答案 2 :(得分:-1)

我使用Sharikov Vladislav的例子。谢谢顺便说一句。

对我而言,只有没有“过滤器”才能正常工作:

<div class="centerdivConteneur" ng-init="$root.breadcrumb.label = '<li><a href=\'#\'>Index</a></li><li>' +('Plan du site'|translate)+'</li>'">

(此页面没有控制器)