面包屑
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>相关阅读
好的导航栏菜单就很容易帮助用户了解自己所处位置，明确告知用户下一步如何做。这也就是网站导航设计被视为用户体验最重要元素单
我们经常在逛淘宝宝贝详情页的时候或者阅览网页的时候，看到商品的宝贝描述详情页右侧有导航，网页里面一般是返回顶部等等，点击就可以
最近一朋友想做个淘宝导购站，让我帮忙找下关键词，老样子先看下拉框再看相关搜索、百度指数，最终决择在关键词推荐，最后一步的时候发现
vue - cli + mint-ui 第一步添加导航（Tabber）
前面两篇写了如何用cli创建一个 vue 项目 以及 项目目录的简介 ，那么从这篇开始就开始代码的部分了。 这次项目主要是借助 mint-u
从字面上来了解淘宝店铺的分类导航，我们能够很清楚的知道它就是指的方向，能够帮助到各位买家们根据这个分类导航来找到顾客想要购买