angularjs实现导航菜单切换高亮

最新推荐文章于 2024-05-30 09:51:11 发布

刀尖的舞者

最新推荐文章于 2024-05-30 09:51:11 发布

阅读量437

点赞数

分类专栏：前端文章标签： angularjs

原文链接：https://www.mk2048.com/blog/blog.php?id=h1202ccibhaa&title=angularjs%E5%AE%9E%E7%8E%B0%E5%AF%BC%E8%88%AA%E8%8F%9C%E5%8D%95%E5%88%87%E6%8D%A2%E9%AB%98%E4%BA%AE

版权

前端专栏收录该内容

280 篇文章 0 订阅

订阅专栏

<ul>
      <li ng-repeat="(index, item) in headerList">
           <a ui-sref="{{item.href}}" 
               ng-class="{selected: selectedIndex === index}" 
               ng-click="changeIndex(index)">
                 <span>{{item.name}}</span>
           </a>
       </li>
</ul>

controller('headerCtrl', function($scope, $location, $state) {
        // 刷新时修正 selectedIndex
        var path = $location.$$path.split('/')[1];
        switch(path) {
            case '':
                $scope.selectedIndex = 0;
                break;
            case 'book':
                $scope.selectedIndex = 1;
                break;
            case 'borrow':
                $scope.selectedIndex = 2;
                break;
            case 'reader':
                $scope.selectedIndex = 3;
                break;
        }
        // 这里的href指的是ui-router的state的name
        $scope.headerList = [{
                href: 'home',
                name: '首页'
            },
            {
                href: 'book',
                name: '图书管理'
            },
            {
                href: 'borrow',
                name: '借还管理'
            },
            {
                href: 'reader',
                name: '读者管理'
            }
        ];
        $scope.changeIndex = function(index) {
            $scope.selectedIndex = index;
        };
    });