CODEWITHSUNDEEP
javascriptjsonangularjs
I Wayan Dharmana
I Wayan Dharmana

Reputation: 107

Angular JSON Display Single Result without Ng-repeat Filter

I'm still develop app for show news update from API Json. Now, I load all of data from json. Then filter it with ng-repeat. This is the problem because when load data, it's so slow. So many data.

I want to make that in controller, only 1 row selected. So, it can be easyly load to the detail page.

I also want to order the news by desc. I've use | orderby. It works. But i must load all of data in one time. It make my apps slow. I want to make swipe to refresh that only show 8 posts at the first time. But, will load the data when swipe (like twitter).

Controller.php

.controller('MediaCtrl', function($scope, $http) {

  $http.get('http://api.pemiluapi.org/rekam-jejak-media/api/rekam_jejak?apiKey=c6a0237499f3e4197546b5551a3a864f')
       .then(function(res){
          $scope.medias = res.data;  
          //alert(res.data);              
        });


})

.controller('MediaDetailCtrl', function($scope, $stateParams, $http) {

  $http.get('http://api.pemiluapi.org/rekam-jejak-media/api/rekam_jejak?apiKey=c6a0237499f3e4197546b5551a3a864f')
       .then(function(res){
          $scope.medias = res.data;  
          $scope.mediaid = $stateParams.mediaId;
          //alert(res.data);              
        });


})

Detail.html

   <ion-content style="padding:30px;" class="item-remove-animate " ng-repeat="media in medias.data.results.rekam_jejak | filter: {id: mediaid}" type="item-text-wrap" href="#/tab/daerah/{{province.id}}">

Media.html (all news)

 <ion-item class="item-remove-animate " ng-repeat="media in medias.data.results.rekam_jejak | orderBy:'id':true" type="item-text-wrap" href="#/tab/media-detail/{{media.id}}">

Thanks in advance :) let share

Upvotes: 0

Views: 457

Answers (1)

samsur
samsur

Reputation: 286

Are you using Ionic framework? Ion-content is a directive in Ionic framework. For long list, it is better to use collection repeat instead of ng-repeat.

Code to list the items could be something like this

<ion-content>
    <ion-item collection-repeat="media in medias.data.results.rekam_jejak">
        <a ng-href="#/{{media.url}}">{{media.id}}</a>
    <ion-item>
</ion-content>

If you click on the link, you should have a route in your config that will have its own view(template) and the controller. In that view, you should show just that particular item. I don't think you should have a problem with performance on the detail page with that approach because there is no need for ng-repeat.

If I have not understood your problem, please let me know.

Upvotes: 0

Related Questions