Reputation: 121
Here is the code
<body ng-app="app">
<div ng-controller="MainCtrl" >
<ul>
<li ng-repeat="n in range" class="test" ng-class="{{($index < 5) && 'visible' || 'invisible' }}" style="display:inline;">
<a href ="#">{{n.number}}</a>
</li>
</ul>
</div>
</body>
angular code
var app=angular.module('app',[]);
app.controller('MainCtrl',function($scope){
$scope.range= [
{number: "1"},
{number: "2"},
{number: "3"},
{number: "4"},
{number: "5"},
{number: "6"},
{number: "7"},
{number: "8"}
];
});
I dont see visible or invisible getting added to class, may I know what is the issues
Upvotes: 0
Views: 1002
Reputation: 1695
Why don't you try this. It will work.
ng-class = {($index < 5) ? 'visible' : 'invisible'}
or This:
ng-class = {visible: (index<5)}
Upvotes: 1
Reputation: 2267
I think in your case it is better to use a directive ng-show or ng-if:
<li ng-repeat="n in range" ng-if="$index < 5" style="display:inline;">
or
<li ng-repeat="n in range" ng-show="$index < 5" style="display:inline;">
Upvotes: 0
Reputation: 14418
You shouldn't use string interpolation in ng-class ({{ ... }}
);
This syntax should work:
ng-class="{ visible : ($index < 5), invisible : ($index >= 5) }"
But a better approach (IMO) would be set styles from invisible
class as default styles of that element and apply only visible
class overwrites.
ng-class="{ visible : $index < 5 }"
This will give you a cleaner looking code.
Upvotes: 2