34

ナビゲーション項目をリストする単純なナビゲーション オブジェクトのセットアップがあります (そして、それらがプライマリ ナビゲーションに表示されるかどうか)。ng-if と ng-repeat を混ぜようとするとうまくいかないようですが、ng-show と ng-repeat を混ぜると問題なく動作します (しかし、私が知らない隠し要素がたくさんできてしまいます) DOM に追加したい)。 

   <section class="nav">
        <a  ng-repeat="(key, item) in route.routes"
            ng-href="{{key}}"
            ng-show="item.nav"
        >
                {{item.label}}
        </a>
    </section>

しかし、以下は機能しません (ng-showが nowであることに注意してくださいng-if):

    <section class="nav">
    <a  ng-repeat="(key, item) in route.routes"
        ng-href="{{key}}"
        ng-if="item.nav"
    >
            {{item.label}}
    </a>
</section>

ルート オブジェクトは次のようになります。

routes: {
    '/home': { label: 'Home', nav: true },
    '/contact': { label: 'Contact', nav: false},
   // etc
}

を使用しようとすると、次のエラーが表示されますng-if。

エラー: 複数のディレクティブ [ngIf、ngRepeat] でトランスクルージョンを要求しています:

2回存在することを宣言しているとは言えません。内側の要素に使用することもできますが、空の外側のタグng-ifがたくさん残ることになると思います。a

4

5 に答える 5

5

リストから特定のアイテムを除外するには、代わりにng-ifフィルター ( http://docs.angularjs.org/api/ng.filter:filter ) を使用する必要があります。ng-repeat

于 2013-10-07T21:56:20.547 に答える
2

私もこの問題に遭遇し、それを解決するいくつかの方法を見つけました。

私が最初に試みたのは、カスタム ディレクティブに結合することでしng-ifたng-repeat。近いうちにそれを github にプッシュしますが、それは厄介です。

それを行うより簡単な方法は、route.routesコレクションを変更する (またはプレースホルダー コレクションを作成する) ことです。

$scope.filteredRoutes = {};
angular.forEach($scope.route.routes, function(item, key) {
    if (item.nav) { $scope.filteredRoutes[key] = item; }
};

そしてあなたの見解では

...
<a  ng-repeat="(key, item) in filteredRoutes"
...

動的に更新する必要がある場合は、ウォッチなどを設定するだけです。

于 2013-10-07T21:55:22.740 に答える
1

$filterを使用したこのワンライナーはどうですか:

$scope.filteredRoutes = $filter('filter')($scope.route.routes, function(route){
  return route.nav;
});
于 2016-09-22T13:04:28.617 に答える
0

ng-repeatを使用する代わりに、でフィルターを使用する必要がありますng-if。

これはうまくいくはずです：

<section class="nav">
    <a  ng-repeat="(key, item) in route.routes | filter:item.nav"
        ng-href="{{key}}">
            {{item.label}}
    </a>
</section>

警告: このコードは実際にはテストしていません。

于 2013-10-07T22:02:34.060 に答える