J. Willumsen J. Willumsen - 10 months ago 32
AngularJS Question

Must not display more when I get data from database

I get the number of news from the database, but for example when I max limit of news such that I receive 24 news in total, then the tag "download more news"¨

Everything plays as it should, but it must just get away such that one can not "download more news" button.

Just to show you can not download more news

Index.Html

<div class="col-md-12" ng-app="NewsLoad" ng-controller="ListNews">
<ul class="team-list sort-destination">
<li class="col-md-4 col-sm-6 col-xs-12 isotope-item leadership" ng-repeat="New in Newslist | limitTo: totalDisplayed" style="max-height:380px; float:left;">
@*html here*@
</li>
</ul>

<div class="form-group col-md-12" style="margin-top:23px;">
<button class="btn-block btn btn-info" ng-click="change()">Download more news</button>
</div>
</div>


Load.js

var app = angular.module('NewsLoad', []);
app.controller('ListNews', function ($scope, $http) {

$scope.totalDisplayed = 9;

$scope.change = function () {
$scope.totalDisplayed += 6;
}

var url = "/Nyheder/all";

$http.get(url).success( function(response) {
$scope.Newslist = response;
});

})

Answer

Try the ng-show expression as below:

<div class="col-md-12" ng-app="NewsLoad" ng-controller="ListNews">
        <ul class="team-list sort-destination">
            <li class="col-md-4 col-sm-6 col-xs-12 isotope-item leadership" ng-repeat="New in Newslist | limitTo: totalDisplayed" style="max-height:380px; float:left;">
                @*html here*@
            </li>
        </ul>

        <div class="form-group col-md-12" style="margin-top:23px;">
            <button class="btn-block btn btn-info" ng-click="change()" 
               ng-show="totalDisplayed &lt; Newslist.length">
               Download more news</button>
        </div>
    </div>