AngularJS动态显示三级分类

最新推荐文章于 2021-03-27 10:49:59 发布

望望打怪兽

最新推荐文章于 2021-03-27 10:49:59 发布

阅读量645

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_43367967/article/details/86436808

本文介绍了如何使用AngularJS动态显示三级分类。首先从数据库层面出发，解释了如何组织数据，确保一级、二级和三级分类的关联。接着，概述了后端在数据获取中的角色，虽然未提供具体代码。最后，详细说明了前端部分，特别是`itemCatService.js`和`goodsController.js`的使用，以及在`goods_edit.html`中如何通过`ng-options`设置选择框，以展示和绑定分类数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

在这里插入图片描述

1.数据库

在这里插入图片描述
父类目ID parent_id=0时，代表的是一级的分类
首先查询出一级分类

以手机为例，它的id为558，即它的二级分类的parent_id就是558
首先查询出二级分类

继续查询出三级分类

2.后端

由于数据库及查询已经写得很详细了，后端代码不祥说了

ItemCatController.java

/**
	 * 根据上级ID查询商品分类列表
	 * @param parentId
	 * @return
	 */
	@RequestMapping("/findByParentId")
	public List<TbItemCat> findByParentId(Long parentId) {
		return itemCatService.findByParentId(parentId);
	}

3.前端

itemCatService.js

//服务层
app.service('itemCatService',function($http){
	    
	//根据上级分类查询商品分类列表
	this.findByParentId=function(parentId){
		return $http.get('../itemCat/findByParentId.do?parentId='+parentId);
	}
	
});

goodsController.js

 //控制层 
app.controller('goodsController',function($scope,$controller,goodsService,itemCatService){	
	
		//查询一级商品分类列表
	$scope.selectItemCat1List=function(){
		itemCatService.findByParentId(0).success(
			function(response){
				$scope.itemCat1List=response;
		    	}	
			);
	}
	//$watch方法用于监控某个变量的值，当被监控的值发生变化，就自动执行相应的函数。
    //查询二级商品分类列表
	$scope.$watch('entity.goods.category1Id',function(newValue,oldValue){
		itemCatService.findByParentId(newValue).success(
				function(response){
					$scope.itemCat2List=response;
				}	
			);
	});
	
	  //查询三级商品分类列表
	$scope.$watch('entity.goods.category2Id',function(newValue,oldValue){
		itemCatService.findByParentId(newValue).success(
				function(response){
					$scope.itemCat3List=response;
				}	
			);
	});
	
	
});

goods_edit.html

引入js

 <script type="text/javascript" src="../js/service/itemCatService.js"></script> 
 <script type="text/javascript" src="../js/controller/goodsController.js"></script>

页面加载调用selectItemCat1List方法，查询一级商品分类列表

修改goods_edit.html一级分类下拉选择框

<td>
<select class="form-control" 
		ng-model="entity.goods.category1Id" 
		ng-options="item.id as item.name for item in itemCat1List">														
</select>
</td>

ng-options属性可以在表达式中使用数组或对象来自动生成一个select中的option列表。ng-options与ng-repeat很相似，很多时候可以用ng-repeat来代替ng-options。但是ng-options提供了一些好处，例如减少内存提高速度，以及提供选择框的选项来让用户选择。

<option value="1">图书、音像、电子书刊</option>

item.id as item.name for item in itemCat1List
这里 item.id as item.name for item in itemCat1List我们使用 itemCat1List 对象的 id作为select的value（即“1”），使用itemCat1List的name 作为 select 的label（即“图书、音像、电子书刊”）

修改goods_edit.html二、三级分类下拉选择框

<td>
	<select class="form-control select-sm" ng-model="entity.goods.category2Id" ng-options="item.id as item.name for item in itemCat2List"></select>
</td>
<td>
	<select class="form-control select-sm" ng-model="entity.goods.category3Id" ng-options="item.id as item.name for item in itemCat3List"></select>
</td>