纳克级的基于NG-重复强调积极的菜单项。 AngularJS [英] ng-class to highlight active menu item based on ng-repeat. AngularJS

问题描述

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

I have a menu based on the following example:

 <nav  data-ng-controller="menuContrl" class="menuItem">
     <a  data-ng-class='{active:isActive("/{{item.path}}")}' data-ng-repeat="item in menu" href="#/{{item.path}}">
         <span>{{item.title}}</span>
     </a>
 </nav>

项目是一个对象，包含菜单项的信息。这里是JavaScript code的指令和控制：

item is an object, containing menu item information. Here is the JavaScript code for the directive and controller:

var app = angular.module("coolApp",[]);

function menuContrl($scope,$location){
    $scope.menu=menu;
    $scope.isActive = function(path){
        return ($location.path()==path)
    } 
}

问题是，纳克级套类到有效页面渲染过程中只有一次，但是当你点击一个菜单项，没什么一切发生的时候。我想这是因为菜单本身不重装，我只是将里面＆LT数据; DIV＆GT; 。那么，如何可以使它无需重新加载整个页面的工作？

The problem is that ng-class sets class to active only once during page rendering, but when you click on a menu items, nothing happenes. I suppose this is because the menu itself is not reloaded and I just change data inside <div>. So how can I make it work without reloading the whole page?

推荐答案

这个问题在旧版本的角的js <大骨节病>的参考 ，问题得到了解决它升级到角JS后1.2.0 版本。

Try this out:- http://jsfiddle.net/uDPHL/146/

This issue exists in older version of angular js Reference, issue got resolved after upgrading it to angular js 1.2.0 version.

JS： -

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' : '';
    };   

}]);

HTML： -

<div class="well sidebar-nav" ng-app="navList">
    <ul class="nav nav-list" ng-controller="navCtrl">
        <li ng-repeat="navLink in navLinks" ng-class="navClass('{{navLink.Title}}')"> <a href='#/{{navLink.Title}}'>{{navLink.LinkText}}</a> 
        </li>
    </ul>
</div>

这篇关于纳克级的基于NG-重复强调积极的菜单项。 AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！