AngularJS(九)面包屑导航

这里写图片描述

1 itemCatService.js

    // 根据上级 ID 查询下级列表
    this.findByParentId = function(parentId) {
        return $http.get("/itemCat/findByParentId?parentId=" + parentId);
    };

2.修改 itemCatController.js

1）抽取根据id查询下级菜单的方法

// 根据上级 ID 查询下级列表
    $scope.findByParentId = function(parentId) {
        // 记住上级id
        $scope.parentId = parentId;

        // 查询下级目录
        itemCatService.findByParentId(parentId).success(function(data) {
            $scope.entitys = data;
        })
    };

2*面包屑通过选择本级菜单对象，查询下级列表的方法

     // 面包屑查询下级列表的方法
    //（直接传对象而不是id，方便导航栏获取对应菜单名称）
    $scope.selectList = function(p_entity) {
        // 如果为1级目录,设置2级，3级菜单为空
        if ($scope.grade == 1) {
            $scope.entity_1 = null;
            $scope.entity_2 = null;
        }
        ;
        // 如果为2级菜单,将一级目录保存到上级
        if ($scope.grade == 2) {
            $scope.entity_1 = p_entity;
            $scope.entity_2 = null;
        }
        ;

        // 如果为3级菜单,将2级目录保存到上级
        if ($scope.grade == 3) {
            $scope.entity_2 = p_entity;
        };
        //调用查询下级列表
        $scope.findByParentId(p_entity.id);

    };

3）设置菜单等级的方法

// 初始化grade菜单等级为1
    $scope.grade = 1;
    // 提供设置grade菜单等级的方法
    $scope.setGrade = function(value) {

        $scope.grade = value;
    };

3 页面加载初始化一级菜单

<!--
ng-app:定义模块儿
ng-controller：定义控制器
ng-init="findByParentId(0)：初始化查询一级菜单名称
-->
<body ng-app="shop" 
      ng-controller="itemCatController"
      ng-init="findByParentId(0)"
    >

4 面包屑菜单导航栏目

<ol class="breadcrumb">
            <li><a href="#" ng-click="grade=1;selectList({id:0})">顶级分类列表</a></li>
            <li><a href="#" ng-click="grade=2;selectList(entity_1)">{{entity_1.name}}</a></li>
            <li><a href="#" ng-click="grade=3;selectList(entity_2)">{{entity_2.name}}</a></li>
</ol>

5 页面便利循环列表

                <thead>
                    <tr>
                        <th ><input= type="checkbox"></th>
                        <th >分类ID</th>
                        <th >分类名称</th>
                        <th>类型模板ID</th>

                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="entity in entitys">
                        <td><input type="checkbox"></td>
                        <td>{{entity.id}}</td>
                        <td>{{entity.name}}</td>
                        <td>{{entity.typeId}}</td>
                    <!-- 菜单等级自增1,并且通过本级对象查询下级列表 -->
                    <button ng-if="grade!=3" type="button"
                        ng-click="setGrade(grade+1);selectList(entity)">查询下级   
                    </button>
                    <!-- 修改前回显菜单对象内容 -->            
                    <button type="button" 
                        ng-click="selectOne(entity.id)">修改
                    </button>

                        </td>
                    </tr>

                </tbody>

AngularJS(九)面包屑导航

AngularJS(九)面包屑导航

猜你喜欢