Question

#Menu code#

    <ons-list-item class="menu-item" ng-repeat="list in pages" ng-click="menu.setMainPage('{{list.PageId}}.html', {closeMenu: true})">
        <ons-icon></ons-icon>
        Home {{ list.PageTitle }}
    </ons-list-item>

#Slider code#

<ons-template ng-repeat="list in pages" id="{{list.PageId}}.html">
    <ons-page>
        <ons-toolbar>
            <div class="left">
                <ons-toolbar-button ng-click="menu.toggle()">
                    <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
                </ons-toolbar-button>
            </div>
        <div class="center">SirBaniyas Forum</div>
        </ons-toolbar>

        <ons-row style="margin-top:0px; background-color:#262217;">
            <div class="page__conbg">
                <div style="position:absolute; top:46px; width:100%; background-image:url(images/strip1.png); background-repeat:repeat-x; text-align:center;">
                    <img src="images/logo_trans.png" alt=""/> 
                </div>
          </div>
        </ons-row>
    </ons-page>
</ons-template>

仅供参考：如果我不使用角度标签并放置一个普通的字符串，滑块工作正常放置角度标签的原因是因为我需要动态生成菜单和内容

Answer 1

好。所以这可能是你的答案。基本上，您只有一个 ons-template ，但它的内容将根据您点击的任何菜单项动态生成。这只是一个简单的例子...但你会明白这一点。

<强>的index.html

<body>

<ons-navigator  title="Navigator" var="myNavigator" >

    <ons-page>

      <ons-toolbar>

        <div class="center">Basic List</div>

      </ons-toolbar>

      <br>      

      <ons-list>

        <ons-list-header>Numbers</ons-list-header>

        <ons-list-item ng-repeat="page in pages" ng-click="loadPage(page.pageId)">{{page.pageTitle}}</ons-list-item>

      </ons-list>

    </ons-page>

  </ons-navigator>



 <ons-template id="templatePage">

  <ons-page>

      <ons-toolbar>

        <div class="left"><ons-back-button>Back</ons-back-button></div>

        <div class="center">{{pageTitle()}}</div>

      </ons-toolbar>

    <p><h2>{{pageContent()}}</h2></p>

  </ons-page>

</ons-template>

</body>

</html>

<强>的javascript

ons.bootstrap();



function MyCtrl($scope,$templateCache) {    

  $scope.pages = [

    {pageId: "Page1", pageTitle: "Page One"},

    {pageId: "Page2", pageTitle: "Page Two"},

    {pageId: "Page3", pageTitle: "Page Three"}

  ];

  $scope.selectPage;



  $scope.loadPage = function(pageId) {

    console.log(pageId);

    for (i = 0; i < $scope.pages.length;i++) {

      if ($scope.pages[i].pageId == pageId) {

        $scope.selectPage = $scope.pages[i];

        break;

      }

    }

    myNavigator.pushPage("templatePage");

  };



  $scope.pageTitle = function () {

    return $scope.selectPage.pageTitle;

  }



  $scope.pageContent = function() {

    return "This is " +  $scope.selectPage.pageTitle;

  }

}

在此处查看现场：'http://codepen.io/vnguyen972/pen/EcIxn'

当我使用角度标签设置Id任何想法为什么时，setMainPage似乎不起作用？

1 个答案: