Selected element color on AngularJS disappears

I need to prevent the color of the selected item from disappearing after clicking 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 : "Registration", url: 'register'}, {name: "Login", url: 'login'}];

I add this code but it doesn'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'
             }
         ];

 });

      

unresolved problem

+3


source to share


1 answer


ok, so this is how I created an element that is generated using ng-repeat to be "selected" as active.

I have installed the "active" ng class by following below.

Hope it 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 add

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

      

+2


source







All Articles