JpDevs JpDevs - 29 days ago 16
AngularJS Question

Angular JS Directive with ng-class

I have a pagination links directive,

app.directive('postsPagination', function(){
return{
restrict: 'E',
template: '<ul class="pagination" ng-show="totalPages > 1">'+
'<li ng-class="disabled: currentPage!=1"><a href="javascript:void(0)" ng-click="getPosts(1)">&laquo;</a></li>'+
'<li><a href="javascript:void(0)" ng-click="getPosts(currentPage-1)">&lsaquo; Prev</a></li>'+
'<li ng-repeat="i in range" ng-class="{active : currentPage == i}">'+
'<a href="javascript:void(0)" ng-click="getPosts(i)">{{i}}</a>'+
'</li>'+
'<li ng-show="currentPage != totalPages"><a href="javascript:void(0)" ng-click="getPosts(currentPage+1)">Next &rsaquo;</a></li>'+
'<li ng-show="currentPage != totalPages"><a href="javascript:void(0)" ng-click="getPosts(totalPages)">&raquo;</a></li>'+
'</ul>'
};
});


The ng-class is not working when the value of current page is not equel to 1.

<li ng-class="disabled: currentPage!=1"><a href="javascript:void(0)" ng-click="getPosts(1)">&laquo;</a></li>'+


This is the error.

enter image description here

How can I solve this issue ?

Answer

Try wrapping the code in {} like:

ng-class="{disabled: currentPage!=1}"
Comments