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

Question

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

我已经搜索了 ng-repeat 和 ng-click，但是 none 给出了我所期望的/或者可能是我不理解它们。

这是我的代码：

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() 中，所以它可以像我预期的那样工作。

我对温泉还很陌生，angular。有什么建议吗？

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");

  };
});

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

firing onsen's setMainPage in onclick using variable from ng-repeat

javascript

onclick

angularjs

angularjs-ng-repeat

onsen-ui

HTML

Javascript