CODEWITHSUNDEEP
javascripthtmlcssangularjs
Vadim Denisuk
Vadim Denisuk

Reputation: 446

The color of selected item on AngularJS disappears

I need the color of the selected item not to disappear after I click any other part of the page.

Index.html

<div class="collapse navbar-collapse navbar-collapse-bottom-right navbar-collapse-default">
    <ul class="nav navbar-nav navbar-right navbar-bottom-right">
        <li class="menuitem" ng-repeat="item in menu"><a href="/#!/{{item.url}}">{{item.title}}</a>
        </li>
    </ul>
</div>

app.js

$rootScope.menu = [ { title: 'Product', url: 'product' }, { title: 'About', url: 'about' }, { title: 'Contact', url: 'contact' }, { title: 'Register', url: 'register' }, { title: 'Login', url: 'login' } ];

I add this code but he don't work

 App.controller('MainController', function ($scope, $rootScope) {  
 $scope.isActive = function(item) {
     return $scope.selected === item; };
         $rootScope.menu = [
             {
                 title: 'Product',
                 url: 'product'
             },
             {
                 title: 'About',
                 url: 'about'
             },
             {
                 title: 'Contact',
                 url: 'contact'
             },
             {
                 title: 'Register',
                 url: 'register'
             },
             {
                 title: 'Login',
                 url: 'login'
             }
         ];

 });

problem unresolved

Upvotes: 3

Views: 345

Answers (1)

user3271518
user3271518

Reputation: 628

ok so this is how I have made an item that is generated using ng-repeat to be "selected" aka active.

I set the ng-class"active" by doing below.

Hope this helps

 <div class="panel-body" id="repeate">
                <div class="list-group" ng-show="Song.length > 0" ng-repeat="s in Song | orderBy: 'Date' :true | limitTo: 100">
                    <a href="#" class="list-group-item" ng-class="{active: isActive(s)}" ng-click="select(s)">{{s.SongName}}</a>
                </div>
 </div>

JS to add 

  $scope.select = function(i) {
    $scope.selected = i;
  };
    $scope.isActive = function(item) {
        return $scope.selected === item;
    };

Upvotes: 2

Related Questions