使用ng-repeat中的变量在onclick中触发onsen的setMainPage

Question

我想让我的Onsen UI splitView应用程序根据从列表中单击的项目获得的变量来设置具有特定页面的主页面。该列表由ng-repeat生成。

我搜索了ng-repeat和ng-click，但没有人给出我的预期/或者也许是我不理解他们。

这是我的代码：

HTML

<ons-split-view 
 var="splitView"
 secondary-page="secondary.html" 
 main-page="main1.html" 
 main-page-width="60%" >
</ons-split-view>

<ons-template id="main1.html" >
    <ons-page ng-controller="ApkController as page">
            <ons-toolbar>
                <div class="center">List of page</div>
            </ons-toolbar>
            <ons-list>
                <ons-list-item modifier="chevron" ng-repeat="content in page.contents" onclick="splitView.setMainPage(content.name'.html');">{{content.number}}. {{content.name}}</ons-list-item>
            </ons-list>
    </ons-page>
 </ons-template>

<ons-template id="secondary.html">
    <ons-page style="border-right: 1px solid #ddd;text-align:center; vertical-align:middle;">
        <ons-toolbar>
            <div class="left"><span class="toolbar-button--quiet navigation-bar__line-height" ><i class="fa fa-angle-left fa-lg" style="color: #666"></i> Back</span></div>
        </ons-toolbar>
        <table style="width:100%;height:100%;">
            <tr >
                <td style="vertical-align:middle;text-align:center">Please choose the page you want </td>
            </tr>
        </table>
    </ons-page>
 </ons-template>

<ons-template id="page1.html">
  <ons-page>
    <ons-toolbar>
      <div class="center"> page 1</div>
    </ons-toolbar>
    <ons-button onclick="splitView.setMainPage('main1.html')">click</ons-button>
  </ons-page>
</ons-template>

<ons-template id="page2.html">
  <ons-page>
    <ons-toolbar>
      <div class="center"> page 2</div>
    </ons-toolbar>
    <ons-button onclick="splitView.setMainPage('main1.html');">click</ons-button>
  </ons-page>
</ons-template>

<ons-template id="page3.html">
  <ons-page>
    <ons-toolbar>
      <div class="center"> page 3</div>
    </ons-toolbar>
    <ons-button onclick="splitView.setMainPage('main1.html')">click</ons-button>
  </ons-page>
</ons-template>

的Javascript

ons.bootstrap().controller('ApkController', function () {
    this.contents = something;
});

var something = [
{
    number : '78',
    name : 'page1',            
},
{
    number : '79',
    name : 'page2',
},
{
    number : '80',
    name : 'page3',
}];

以上是codepen.io中的上述代码：http://codepen.io/fadynoor/pen/GJJMLx

问题我不知道如何在content.name中插入我的setMainPage()，以便它可以像我预期的那样工作。

我对温泉和角度很新。有什么建议吗？

P.S。 ：这是我在这个论坛上的第一个问题。所以，对不起，如果我犯了错误:)

Answer 1

您可以进行以下更改，您的代码应该正常工作

<ons-list-item modifier="chevron" ng-repeat="content in page.contents" ng-click="showContent( content)">{{content.number}}. {{content.name}}</ons-list-item>

Javascript控制器应该看起来像这样

ons.bootstrap().controller('ApkController', function ($scope) {
  this.contents = something;

  $scope.showContent = function(content){
    splitView.setMainPage(content.name + ".html");

  };
});