ons-navigatorとng-repeatの組み合わせ

Question

などを使用して配列に基づいて任意の数のページでons-navigator要素を作成しようとしています。この中で、私はページを通して前方をスキップする方法を見つける必要があります。

私はng-repeatをons-templateで使用しようとしましたが、私のナビゲータ内では使用できません。私のアプローチがうまくいかない理由を説明しているGitHubの問題があります：https://github.com/OnsenUI/OnsenUI/issues/233

Answer 1

現在のところ、最初からナビゲータに任意の数のページを置くことができます。

<ons-navigator> 
    <ons-page ng-repeat="page in pages">{{$index}}</ons-page> 
</ons-navigator> 

これは問題なく動作します。今度はskipping forwardの部分について - 実際にはナビゲータはスタックのようにページを持つことになっています。つまり、最後のページは常に目に見えるものになっています。そのため、方法はpushPageとpopPageです。だからあなたが一般的にやるべきことは、スタックに入れたいページだけをプッシュすることです。あなたの場合、$scope.pagesには必要なページだけが必要です。将来的に必要なページがある場合は、後で追加することをお勧めします。

あなたが必要とするページよりも多くのページを配置したい場合は、それでもやりとりができますが、自分でページの表示を管理する必要があります。あなたの2つのオプションは、次のようになります。

• 不要なページを非表示にするには：
• bringPageTopのようなものを使用して、必要なものをスタックの最上部に配置します。

これらの2つのアプローチのうち、Demoがあります。

動的テンプレートを生成することについて - たぶん1つのテンプレートを使用して管理しようとするかもしれませんが、コントローラを持っていれば何でもできます。最初はng-repeatのようなものをテンプレート自体に使用することはできませんが、DOMにテンプレートの内容を追加すると、バインディングはうまく動作します。その場合は、同じテンプレートを複数回（おそらくアニメーションなし）押して、スコープ内で必要なものを変更するだけです。