J. Willumsen J. Willumsen - 4 months ago 6
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>
Comments