CODEWITHSUNDEEP
angularjsionic-frameworkangularjs-ng-repeat
Sammi
Sammi

Reputation: 261

texts not displaying with ng-repeat in ion-item

I am trying to construct a ng-repeat list with ionic-item.

I have searched on web and I am trying to do as the way like the following code, but in a ionic item. (Credit to author: Prashobh PS)

Code

And my result is, the ion-items showing on the list and the pagination is also working. The number of items can be changed with the number of my entries on the datalist. Seems they are all working. But the problem is that the texts are not showing in the items. Only blank items are created.

Would anyone please help and give me some directions. Thank you so much!

<div ng-app="sampleapp">


<ul>
  <li class="paginationclass" style="font-weight:bold;"><span>Name</span><span>Age</span><span>Designation</span></li>
  <li class="paginationclass" ng-repeat="datalist in datalists | pagination: curPage * pageSize | limitTo: pageSize">
    <div><span>{{ datalist.name }} </span><span>{{ datalist.age }}</span><span>{{ datalist.designation }}</span></div>
  </li>
</ul>

<div class="pagination pagination-centered" ng-show="datalists.length">
  <ul class="pagination-controle pagination">
    <li>
      <button type="button" class="btn btn-primary" ng-disabled="curPage == 0" ng-click="curPage=curPage-1"> &lt; PREV</button>
    </li>
    <li>
      <span>Page {{curPage + 1}} of {{ numberOfPages() }}</span>
    </li>
    <li>
      <button type="button" class="btn btn-primary" ng-disabled="curPage >= datalists.length/pageSize - 1" ng-click="curPage = curPage+1">NEXT &gt;</button>
    </li>
  </ul>
</div>

EDIT： my code is like this :

http://codepen.io/anon/pen/ENOwvM

Upvotes: 1

Views: 187

Answers (1)

JanP
JanP

Reputation: 1581

Your example code is different from your Codepen. Assuming the Codepen is the latest version, see this JSFiddle with a working version of your code: http://jsfiddle.net/go9etbnv/1/

Have a look at these lines:

 <b>{{contact.customerName}}</b><hr>
 {{contact.orderNumber}}

And this part:

<div class="pagination pagination-centered" ng-show="datalists.contacts.length">

Upvotes: 1

Related Questions