I need help customizing my Onsen UI splitView app to dynamically set the main page based on a variable received from a clicked item in a list generated by ng-repeat.
After researching ng-repeat and ng-click, I am still unable to achieve the desired outcome. Perhaps I am not understanding them correctly.
Below is the relevant code:
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 pages</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',
}];
You can also view the code on CodePen: http://codepen.io/fadynoor/pen/GJJMLx
The issue lies in inserting content.name into the setMainPage() function so it functions as intended.
I am new to Onsen UI and Angular, any suggestions would be greatly appreciated.
P.S.: This is my first time posting in this forum, apologies for any mistakes made.