CODEWITHSUNDEEP
javascriptangularjs
Madhu
Madhu

Reputation: 121

Angularjs: ng-class not picking up class

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

Answers (3)

Harsh
Harsh

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

Goodnickoff
Goodnickoff

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

Setthase
Setthase

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

Related Questions