当前位置:首页 > IT技术

AngularJS(九)面包屑导航

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

面包屑

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>

相关阅读

优秀的网站导航设计应该具备哪些因素

 好的导航栏菜单就很容易帮助用户了解自己所处位置,明确告知用户下一步如何做。这也就是网站导航设计被视为用户体验最重要元素单

如何给宝贝描述详情页设置导航

我们经常在逛淘宝宝贝详情页的时候或者阅览网页的时候,看到商品的宝贝描述详情页右侧有导航,网页里面一般是返回顶部等等,点击就可以

每天5800搜索量竞争度0的淘宝导航关键词分析

最近一朋友想做个淘宝导购站,让我帮忙找下关键词,老样子先看下拉框再看相关搜索、百度指数,最终决择在关键词推荐,最后一步的时候发现

vue - cli + mint-ui 第一步添加导航(Tabber)

前面两篇写了如何用cli创建一个 vue 项目 以及 项目目录的简介 ,那么从这篇开始就开始代码的部分了。 这次项目主要是借助 mint-u

淘宝店铺分类导航怎么做?如何做好网店分类导航?

从字面上来了解淘宝店铺的分类导航,我们能够很清楚的知道它就是指的方向,能够帮助到各位买家们根据这个分类导航来找到顾客想要购买

分享到:

栏目导航

推荐阅读

热门阅读