javascript - AngularJS 中选中项的颜色消失了

Question

我需要所选元素的颜色在我单击页面的任何其他部分后不会消失。

索引.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>

应用程序.js

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

我添加了这段代码但是他不工作

 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 问题

Answer 1

好的，这就是我如何使使用 ng-repeat 生成的元素被“选中”，也就是激活。

我通过以下操作设置了 ng-class“active”。

希望对你有帮助

 <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添加

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