angularjs（ng-repeat和filter）生成多级菜单

最新推荐文章于 2024-05-30 09:51:11 发布

isabellazheng1991

最新推荐文章于 2024-05-30 09:51:11 发布

阅读量2.5k

点赞数

分类专栏： html 文章标签： angularjs 多级菜单

本文链接：https://blog.csdn.net/isabellazheng1991/article/details/78572528

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

需求如下：

后端通过数据库生成无序的数组，传到前端，数据结构如下（pid即parentId，如本级的pid为4，则它上一级的menu_id为4）：

       [
          {pid:1,menu_id:7},
          {pid:4,menu_id:9},
          {pid:3,menu_id:8},
          {pid:0,menu_id:4},
          {pid:0,menu_id:3},
          {pid:4,menu_id:10},
          {pid:0,menu_id:1},
          {pid:1,menu_id:11},
          {pid:8,menu_id:15}
      ];

前端实现如下

<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp"  ng-controller="myCtrl">
    <div ng-repeat="x in items | filter:{'pid':0}  | orderBy: 'menu_id' ">
  一级菜单：{{x}}
      <div ng-repeat="y in items | orderBy : ['pid','menu_id']| filter:{'pid' : x.menu_id}">
  二级菜单：{{y}}
        <div ng-repeat="z in items | orderBy : ['pid','menu_id']| filter:{'pid' : y.menu_id}">
   三级菜单：{{z}}</div>
      </div>
    </div>
</div>
<script>
	var app = angular.module('myApp',[]);
	app.controller('myCtrl', function($scope) {
       $scope.items = [
          {pid:1,menu_id:7},
          {pid:4,menu_id:9},
          {pid:3,menu_id:8},
          {pid:0,menu_id:4},
          {pid:0,menu_id:3},
          {pid:4,menu_id:10},
          {pid:0,menu_id:1},
          {pid:1,menu_id:11},
          {pid:8,menu_id:15}
      ];

</script>

</body>

结果如下：

isabellazheng1991

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs（ng-repeat和filter）生成多级菜单

需求如下：后端通过数据库生成无序的数组，传到前端，数据结构如下（pid即parentId，如本级的pid为4，则它上一级的menu_id为4）： [ {pid:1,menu_id:7}, {pid:4,menu_id:9}, {pid:3,menu_id:8}, {pid:0,menu_id:4},
复制链接

扫一扫

专栏目录