angularjs（ng-repeat和filter）生成多級選單

阿新 • • 發佈：2019-01-18

需求如下：

後端通過資料庫生成無序的陣列，傳到前端，資料結構如下（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>

結果如下：

angularjs（ng-repeat和filter）生成多級選單

需求如下：後端通過資料庫生成無序的陣列，傳到前端，資料結構如下（pid即parentId，如本級的pid為4，則它上一級的menu_id為4）： [ {pid:1,menu_id:7}, {pid:4,menu_id

angularJs中ng-repeat遍歷動態生成的表單元素繫結ng-model無效的問題

我在做練習中偶然遇到這個問題，與大家分享一下。我也是剛開始接觸angularJs,相信也有人同樣遇到過。問題描述：在使用anjularJs框架核心模組ng雙向資料繫結，在ng-repeat遍歷物件或陣列的時候，用ng-model繫結動態生成表單元素時，利用$sco

關於AngularJS中ng-repeat問題（問卷遍歷問題）

option_val = []; var count = 0; $scope.submitText = function () { var type = document.getElementsByTagName("input");

C++實現利用（前序和中序生成二叉樹）以及（二叉樹的鏡像）

lse pub 非遞歸 ace 方法 [] reorder spa push #include<iostream> #include<string.h> #include<stack> using namespace std; type

24-BPDU Filter和BPDU Guard（BPDU過濾和防護） //IOU模擬

root down ast recover loop vlan val lin conf 一、實驗拓撲：二、命令部署：1、SW1、SW2、SW3部署Trunk和VTP：ESW1(config)#int range f1/0 - 1ESW1(config-if-range)#

【Java】itext根據模板生成pdf（包括圖片和表格）

金額 res report als fields positions 創建模板 bst open() 1、導入需要的jar包：itext-asian-5.2.0.jar itextpdf-5.5.11.jar。 2、新建word文檔，創建模板，將文件另存為pdf，並用Ado

maven生成可以直接執行的jar（包括依賴和mainclass）

轉：http://blog.csdn.NET/xiao__gui/article/details/47341385 Maven可以使用mvn package指令對專案進行打包，如果使用Java -jar xxx.jar執行執行jar檔案，會出現"no

隨機生成8位數（包含字母和數字）

String[] chars = new String[] { "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s

Servlet 和Filter的生命週期（springboot測試servlet和filter）

servlet生命週期：通過建構函式例項化Servlet物件；當第一次瀏覽器向伺服器傳送請求，訪問servlet；呼叫init方法進行初始化 (servlet物件一般只有一個，會常駐記憶體) init方法只會呼叫一次；開啟一個執行緒，去呼叫s

AngularJS中ng-repeat渲染完成事件和中間變數的引用

ng-repeat渲染完成事件因為在用AngularJS期間, 經常用到ng-repeat, 而有時需要在其渲染完成時操作已經渲染的物件, 所以特在此記錄一下新增渲染事件的方法, 以方便以後的使用; 程式碼如下 myApp.directive('onRepeatFin

angularJS指令ng-repeat生成的dom元素js獲取不到

用ng-repeat生成的元素用js怎麼也獲取不到這個其中原由是：angular擁有自動化渲染DOM的特性，它能幫助我們專注於操作資料，而頁面的渲染則由angular自身來完成。這就造成了 ng-repeat 迴圈完成後angular並不會告訴我們dom渲染完了;換句

APP支付（支付寶和微信生成客戶端簽名及回撥驗籤）

<?php namespace Pn\Controller; use Think\Controller\RestController; class PayController extends RestController{ public function __

Angularjs中select 的ng-repeat 和 ng-options 用法和獲取選取值

AngularJS模組化開發中，遇到幾次下拉選單實現搜尋功能的案例，現整理一下select中ng-repeat 和ng-options的用法和獲取值的方法一，ng-repeat 1,HTML <selectng-model="selectedItems"ng-

Maven打包時自動選擇不同的配置（利用profile和filter外掛）

專案開發時，一般都會部署到兩套以上不同的環境中（比如開發環境和生產環境）。打包的時候需要修改配置檔案中的很多資訊、或替換不同的配置檔案，很容易出錯而且不方便。下面舉例介紹如何利用Maven的profi

css（八--單位和值）

整數段落設置方法 tro rgb 間距 border 距離 lin 顏色值在網頁中的顏色設置是非常重要，有字體顏色（color）、背景顏色（background-color）、邊框顏色（border）等，設置顏色的方法也有很多種： 1、英文命令顏色前面幾個小節中經常

Xml一（基本語法和約束）、

字符一行語言 oca cas 書寫 xsd ati 寫法 XML：eXtensible Markup Language 可擴展標記語言 version="1.0" 　　　　* 可擴展：所有的標簽都是自定義的。　　　　* 功能：數據存儲　　　　* 配置文件　

Java的幾個有用小Util函數（日期處理和http）

content lex .get get sta mmd 第幾天 service ret /** * 依據日期返回當前日期是一年的第幾天 * @param date * @return */ public stat

ASPF（Application Specific Packet Filter）

per .com 修改 aspf 機制一個自身 com height ASPF ASPF（Application Specific Packet Filter）是針對應用層的包過濾，其原理是檢測通過設備的報文的應用層協議信息，記錄臨時協商的數據連接，使得某些在安全策

ASP.NET MVC Bundles 用法和說明（打包javascript和css）

http debug模式尋找所有 ida jquery-ui content end eas 本文主要介紹了ASP.NET MVC中的新功能Bundles，利用Bundles可以將javascript和css文件打包壓縮，並且可以區分調試和非調試，在調試時不進行壓縮，以

python學習筆記第十一節（叠代和其他）

技術分享 img 余數商品列表步長取數 sorted函數學習四舍五入 yiled 面相過程編程造好內容，統一發給下面上面這個是傻瓜版內置函數 print(divmod(10,3)) 將10除以3，顯示商和余數 enumerate函數，顯示元素及它

angularjs（ng-repeat和filter）生成多級選單

相關推薦