ng-class根据ng-repeat突出显示活动菜单项AngularJS

(adsbygoogle = window.adsbygoogle || []).push({}); 如何解决ng-class根据ng-repeat突出显示活动菜单项AngularJS？试试看：-http :

//jsfiddle.net/uDPHL/146/

的旧版本中存在此问题angular js[Reference](https://github.com/angular/angular.js/issues/4002)，将其升级到angularjs 1.2.0版本后已解决。

var navList = angular.module(’navList’, []);navList.controller(’navCtrl’, [’$scope’, ’$location’, function ($scope, $location) { $scope.navLinks = [{Title: ’home’,LinkText: ’Home’, }, {Title: ’about’,LinkText: ’About Us’ }, {Title: ’contact’,LinkText: ’Contact Us’ }]; $scope.navClass = function (page) {var currentRoute = $location.path().substring(1) || ’home’;return page === currentRoute ? ’active’ : ’’; };}]);

<div ng-app='navList'> <ul ng-controller='navCtrl'><li ng-repeat='navLink in navLinks' ng-class='navClass(’{{navLink.Title}}’)'> <a href=’#/{{navLink.Title}}’>{{navLink.LinkText}}</a> </li> </ul></div>解决方法

我有一个基于以下示例的菜单：

<nav data-ng-controller='menuContrl' class='menuItem'> <a data-ng-class=’{active:isActive('/{{item.path}}')}’ data-ng-repeat='item in menu' href='https://www.6hehe.com/wenda/22436.html#/{{item.path}}'> <span>{{item.title}}</span> </a> </nav>

item是一个对象，包含菜单项信息。这是指令和控制器的JavaScript代码：

var app = angular.module('coolApp',[]);function menuContrl($scope,$location){ $scope.menu=menu; $scope.isActive = function(path){return ($location.path()==path) } }

问题是，ng-class套class到active只有一次页面渲染过程中，但是当你点击一个菜单项，没有一切发生的时候。我想这是因为菜单本身并未重新加载，而我只是在其中更改了数据<div>。那么如何在不重新加载整个页面的情况下使它工作呢？