神刀安全网

Repeater Control in Ionic Framework with Refresh

The Ionic Framework has a collection-repeat directive that you can use instead of ng-repeat because collection-repeat allows an app to show huge lists of items with great performance than ng-repeat .

At first we will update our index.html to the below code :

<body ng-app="starter">

  <ion-nav-bar class="bar-stable"></ion-nav-bar>

  <ion-nav-view></ion-nav-view>

</body>

Next we will write our Controller i.e. repeaterCtrl which will give us the data

.controller(‘repeaterCtrl’, function ($scope) {

  $scope.values = [];

  for(i=0;i<10;i++)

  {

    var value = {

      randomNumber: Math.random(),

      date: new Date().toLocaleDateString()

    }

    $scope.values.push(value);

  }


  $scope.doRefresh = function () {

    $scope.values = [];

    for (i = 0; i < 10; i++) {

      var value = {

        randomNumber: Math.random(),

        date: new Date().toLocaleDateString()

      }

      $scope.values.push(value);

    }

    $scope.$broadcast(‘scroll.refreshComplete’);

  }

})

In the above code we are creating our items array and then inserting 10 random values, we can even fetch data from the API. Next we are writing a function which will again call the API to get the updated values. After updating the values we will do a broadcast to notify that the refresh is complete.

Next we will write our page1.html which is created inside templates folder as shown below

<ion-view view-title="Repeater Controller Example (Pull to Refresh)">

  <ion-content class="padding">

    <ion-refresher pulling-text="Update Date" on-refresh="doRefresh()"></ion-refresher>

    <ion-list>

      <ion-item collection-repeat="value in values">

        <p>Random Value : {{value.randomNumber}}</p>

        <p>Date : {{value.date}}</p>

      </ion-item>

    </ion-list>

  </ion-content>

</ion-view>

In the above code we are creating a list using ion-list with each item added in a ion-item using collection-repeat directive. We are also using ion-refresher which will call the doRefresh() function on refreshing.

Our app.js file will have the code as shown below were we are configuring the state.

.config(function($stateProvider, $urlRouterProvider) {

  .state(‘page1’, {

    url: "/page1",

    templateUrl: ‘templates/page1.html’,

    controller: ‘repeaterCtrl’

  })


  $urlRouterProvider.otherwise(‘/page1’);

}); 

After running you will get the following output :

Repeater Control in Ionic Framework with Refresh

Repeater Control in Ionic Framework with Refresh

Repeater Control in Ionic Framework with Refresh

Please Like and Share the CodingDefined.com Blog, if you find it interesting and helpful.

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Repeater Control in Ionic Framework with Refresh

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮