当前位置:首页 > IT技术

AngularJS(九)面包屑导航

时间:2019-07-19 13:11:06来源:IT技术作者:seo实验室小编阅读:52次「手机版」
 

面包屑

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>

相关阅读

网页顶部导航栏设计总结

网页中顶部导航栏往往是用户进入网站后最先看到的地方,决定着用户对网页的第一印象,其重要性不言而喻。网页中的header,一般我们称之

React Navigation 基础 5 : 配置导航头部

配置导航头部 设置头部标题 屏幕组件可以有一个静态属性navigationOptions,可以是一个对象或者返回一个对象的函数,该对象包含了各

推荐几个比较好的导航网站——持续更新

1、人人都是产品经理http://dh.woshipm.com/2、数据分析网http://www.afenxi.com/hao3、199ithttp://hao.199it.com/4

淘宝首页之导航条——弹出式悬浮菜单

昨天学习了布局,今天要来实现弹出式导航条。布局选的flex布局。关于弹出式悬浮菜单总结了下大概是以下几步:1.鼠标放到一级菜单上时

侧边抽屉式导航可能会降低你产品一半的用户参与度

设想你需要设计一个含有许多页面和模块,不能在一屏内显示完全的应用。你一定会首先想到去设计一个底部或顶部的Tab导航。等一下,多

分享到:

栏目导航

推荐阅读

热门阅读