если количество результатов возвращено> X затем скрыть элемент angularjs

Question

Я хотел бы определить количество результатов, возвращаемых в цикле ng-repeat, а затем, если это больше определенного числа, выполните код, например. скрыть тег HTML. Так что если p в pics больше X, то скройте что-то. Не знаете, как идти о нем:

Вот отрывок из моего кода:

HTML

<li ng-repeat="p in pics"> 
    <a href="{{p.link}}" target="_blank"><img ng-src="{{p.images.thumbnail.url}}" /></a> 
    <p>{{p.comments.data|getFirstCommentFrom:'alx_lloyd'}}</p> 
</li> 

JS

(function(){ 
    //Place your own Instagram client_id below. Go to https://instagram.com/developer/clients/manage/ and register your app to get a client ID 
    var client_id = ''; //redacted 
    //To get your user ID go to http://jelled.com/instagram/lookup-user-id and enter your Instagram user name to get your user ID 
    var user_id = ''; //redacted 

    var app = angular.module('instafeed', ['ngAnimate']); 
    app.filter('getFirstCommentFrom',function() { 
     return function(arr, user) { 
      for(var i=0;i<arr.length;i++) { 
      if(arr[i].from.username==user) 
       return arr[i].text; 
      } 
      return ''; 
     } 
    }) 

    app.factory("InstagramAPI", ['$http', function($http) { 
    return { 
     fetchPhotos: function(callback){ 
     var endpoint = "https://api.instagram.com/v1/users/self/media/liked/"; 
     endpoint += "?access_token=foobar"; 
     endpoint += "&callback=JSON_CALLBACK"; 
     /* var endpoint = "https://api.instagram.com/v1/users/" + user_id + "/media/recent/?"; 
     endpoint += "?count=99"; 
     endpoint += "&client_id=" + client_id; 
     endpoint += "&callback=JSON_CALLBACK"; 
*/ 
     $http.jsonp(endpoint).success(function(response){ 
      callback(response.data); 

     }); 
     } 
    } 
    }]); 

    app.controller('ShowImages', function($scope, InstagramAPI){ 
    $scope.layout = 'grid'; 
    $scope.data = {}; 
    $scope.pics = []; 



    InstagramAPI.fetchPhotos(function(data){ 
     $scope.pics = data; 
     console.log(data) 
    }); 
    }); 


})(); 

Answer 1

Вы можете использовать нг скрытие, так как ваши фото только в массив и проверить длину массива, например:

<h2 ng-hide="pics.length > 5">HIDE ME</h2> 

---

(function() { 
 
    //Place your own Instagram client_id below. Go to https://instagram.com/developer/clients/manage/ and register your app to get a client ID 
 
    var client_id = '83aaab0bddea42adb694b689ad169fb1'; 
 
    //To get your user ID go to http://jelled.com/instagram/lookup-user-id and enter your Instagram user name to get your user ID 
 
    var user_id = '179735937'; 
 

 
    var app = angular.module('instafeed', ['ngAnimate']); 
 
    
 
    app.filter('getFirstCommentFrom', function() { 
 
    return function(arr, user) { 
 
     for (var i = 0; i < arr.length; i++) { 
 
     if (arr[i].from.username == user) 
 
      return arr[i].text; 
 
     } 
 
     return ''; 
 
    } 
 
    }) 
 

 
    app.factory("InstagramAPI", ['$http', 
 
    function($http) { 
 
     return { 
 
     fetchPhotos: function(callback) { 
 
      var endpoint = "https://api.instagram.com/v1/users/self/media/liked/"; 
 
      endpoint += "?access_token=179735937.83aaab0.e44fe9abccb5415290bfc0765edd45ad"; 
 
      endpoint += "&callback=JSON_CALLBACK"; 
 
      $http.jsonp(endpoint).success(function(response) { 
 
      callback(response.data); 
 
      }); 
 
     } 
 
     } 
 
    } 
 
    ]); 
 

 
    app.controller('ShowImages', function($scope, InstagramAPI) { 
 
    $scope.layout = 'grid'; 
 
    $scope.data = {}; 
 
    $scope.pics = []; 
 

 
    InstagramAPI.fetchPhotos(function(data) { 
 
     $scope.pics = data; 
 
     console.log(data) 
 
    }); 
 
    }); 
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script> 
 

 
<div ng-app='instafeed' ng-controller='ShowImages'> 
 
    <li ng-repeat="p in pics"> 
 
    <a href="{{p.link}}" target="_blank"> 
 
     <img ng-src="{{p.images.thumbnail.url}}" /> 
 
    </a> 
 
    <p>{{p.comments.data|getFirstCommentFrom:'alx_lloyd'}}</p> 
 
    </li> 
 
    <h2 ng-hide="pics.length > 5">HIDE ME</h2> 
 
</div>

Answer 2

Если вы хотите означать что-то например, «показывать только первые четыре результата», тогда вы можете сделать это, используя $index от n г-повтор.

Например следующие будут показывать пункты с 0 < = $ индекс < = 3.

<li ng-repeat="p in pics" ng-if="$index < 4"> 

Вы можете ссылаться на $index в любом месте внутри раппорта - не только на самом повторении:

<li ng-repeat="p in pics"> 
    <a href="{{p.link}}" target="_blank"><img ng-src="{{p.images.thumbnail.url}}" /></a> 

    <p ng-if="$index<4">{{p.comments.data|getFirstCommentFrom:'alx_lloyd'}}</p> 
</li> 

Альтернативно, если вы хотите скрыть всю лот, вы должны уметь вынимать длину из массива:

<div id="container" ng-if="pics.length <= 4"> 
    <li ng-repeat="p in pics"> 
    ... 
    </li> 
</div> 

Для любого из них вы можете выбрать между ng-if и ng-hide. Я бы предпочла ng-if, поскольку это заставляет рендер полностью игнорироваться. ng-hide будет отображать всю разметку, а затем установить только display:none;, что, скорее всего, будет полезно, если условие может измениться из-за ввода пользователем страницы (например).

Как @DTing указывает, вы также можете использовать фильтр на самом повторении, если вы хотите, чтобы применить фильтр на этом уровне:

<li ng-repeat="p in pics | limitTo: 4">