Add filters in ng-init

Question

<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>

It is important to do filtering in ng-init if it is possible, but i cannot solve it, i cannot make ng-repeat and create scope which i pass after to my directive cause it start infinite digest loop.

Sharikov Vladislav · Accepted Answer · 2017-11-30T08:07:02.277

14

The answer to your question

Your snippet doesn't work because of ho and filter:search are different statements. In

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

... the assignment FilteredGeojson = ho is done before the filter | filter:search is applied, which does not work.

You need to encapsulate filtering the value like this:

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

Also

It is important to do filtering in ng-init

Important for what? ngInit directive will be called only once there, so when you'll update your filter, items in ngRepeat wouldn't be updated. But you need this, right?

To achieve this you should add filter in ngRepeat directive, like this:

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

Example

Both solutions are available in this plnkr example.

edited Nov 30 '17 at 08:07

answered Feb 11 '15 at 18:36

Sharikov Vladislav

7,049
9
50
87

There is something else i want to use ng-init for other directive and when i did sth like this

{{ item.name }}

{{FilteredGeojson}}

FilteredGeojson in
is not changing, how to influence it as well?
– Igor Feb 11 '15 at 19:10
Nononono, don't write code in the comments, firstly. Update your answer. I had provided fully working plnkr and its ok. Did I answered your question? If you need to do more, add explanation to the question, but it is better to create new. This one is solved. – Sharikov Vladislav Feb 11 '15 at 19:14
it is not solved in my question i pass ng-init after filtering by scope into another directive, you haven't done so in your plnkr, I asked how to make filtering just in ng-init, your example is not working if i delete filter search from ng-repeat. – Igor Feb 11 '15 at 19:41
And my second statement says clearly that i cannot use ng-repeat – Igor Feb 11 '15 at 19:56
1

@IOR88, exactly. Why you cannot use ngRepeat? That means you have complex architecture problem. You didn't explained that at all. Statements in ngInit are fired 1 time, so it wouldn't work with runtime filter: ngInit wouldn't fire on ngInit. Another way is to use `$watch` on `$scope.filter`, but it is monstrous. You have to use ngRepeat, where you need to use ngRepeat that's all. – Sharikov Vladislav Feb 11 '15 at 20:20
i made new question with fiddler http://stackoverflow.com/questions/28464558/ng-repeat-causing-infinitive-digest-loop-when-passing-scope-to-leaflet-directive – Igor Feb 11 '15 at 21:11

score 0 · Answer 2 · answered Apr 21 '17 at 22:23

You don't need ng-init here but an improvised use of ng-repeat.
Here is the updated plnkr.

Here is the index.html in the plnkr.

<!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 will be updated when you changed search variable on the scope using input box. I updated the plnkr to show this.

Also, if the Geojson array is a long array, you can use limitTo filter like this.

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

Let me know if it helped or not.

score -1 · Answer 3 · answered Jul 13 '15 at 08:29

I use the example of Sharikov Vladislav. thanks by the way.

for me it's work only without "filter" :

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

(this page have no controller )

Add filters in ng-init

3 Answers3

The answer to your question

Also

Example