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 to share