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

来源：互联网发布：redis做数据库编辑：程序博客网时间：2024/06/15 13:05

需求如下：

后端通过数据库生成无序的数组，传到前端，数据结构如下（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>

结果如下：

阅读全文

0 0