5 
<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 を作成できず、ディレクティブの後に渡すスコープを作成できず、無限ダイジェスト ループが開始されます。

4

3 に答える 3

14

あなたの質問への答え

hoとfilter:searchが異なるステートメントであるため、スニペットは機能しません。の

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

FilteredGeojson = ho...フィルターが適用される前に割り当てが行われます| filter:searchが、これは機能しません。

次のように値のフィルタリングをカプセル化する必要があります。

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

また

ng-init でフィルタリングを行うことが重要です

何のために重要？ngInitディレクティブはそこで 1 回だけ呼び出されるため、フィルターを更新しても項目はngRepeat更新されません。しかし、これが必要ですよね？

これを実現するには、次ngRepeatのようにフィルターをディレクティブに追加する必要があります。

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

例

この plnkr の例では、両方のソリューションを利用できます。

于 2015-02-11T18:36:03.313 に答える
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>

FilteredGeojsonsearch入力ボックスを使用してスコープの変数を変更すると更新されます。これを示すためにplnkrを更新しました。

また、Geojson配列が長い配列の場合は、limitToこのようにフィルターを使用できます。

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

それが役に立ったかどうか教えてください。

于 2017-04-21T22:23:22.910 に答える