2016-05-05 10 views
0

Ich versuche, ein ons-navigator Element mit einer beliebigen Anzahl von Seiten basierend auf einem Array mit ng-repeat oder etwas ähnliches zu erstellen. Innerhalb dieser muss ich einen Weg finden, um vorwärts durch die Seiten zu springen.Kombinieren von Ons-Navigator und ng-repeat

Ich habe versucht, ng-repeat auf ons-template innerhalb meines Navigators ohne Erfolg zu verwenden. Es gibt ein GitHub-Problem, das erklärt, warum mein Ansatz nicht funktioniert: https://github.com/OnsenUI/OnsenUI/issues/233

Antwort

0

Derzeit können Sie einfach eine beliebige Anzahl von Seiten in den Navigator von Anfang an einfügen.

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

Das funktioniert gut. Jetzt über den skipping forward Teil - eigentlich soll der Navigator Seiten darin haben, als wären sie ein Stapel, was bedeutet, dass die letzte Seite immer die sichtbare sein soll. Deshalb gibt es auch die Methoden pushPage und popPage. Also, was Sie normalerweise tun sollten, ist nur drücken Sie nur die Seiten, die Sie in Ihrem Stapel möchten. In Ihrem Fall sollte die $scope.pages nur die Seiten haben, die Sie benötigen. Wenn Sie Seiten haben, die Sie in Zukunft benötigen, ist es das Beste, wenn Sie sie später hinzufügen.

Wenn Sie mehr Seiten als die benötigen, die Sie benötigen, können Sie das trotzdem tun, aber dann müssen Sie das Anzeigen der Seiten selbst verwalten. Ihre zwei Optionen wären dann:

  • Um die Seiten auszublenden, die Sie nicht möchten.
  • Um etwas wie bringPageTop zu verwenden, um diejenigen, die Sie auf der Oberseite des Stapels wollen.

Hier ist ein Demo dieser beiden Ansätze.

Und über das Generieren von dynamischen Vorlagen - vielleicht könnten Sie versuchen, mit einer Vorlage zu verwalten, aber mit dem Controller tun, was Sie wollen. Zu Beginn können Sie nicht so etwas wie ng-repeat auf der Vorlage selbst verwenden, aber nachdem Sie den Vorlageninhalt zum Dom hinzugefügt haben, funktionieren die Bindungen gut. In diesem Fall können Sie einfach die gleiche Vorlage mehrmals drücken (wahrscheinlich ohne Animation) und einfach das ändern, was Sie wollen.