欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Angular directive遞歸實(shí)現(xiàn)目錄樹結(jié)構(gòu)代碼實(shí)例

 更新時(shí)間:2017年05月05日 10:38:01   作者:老王今天沒吃藥  
本篇文章主要介紹了Angular directive遞歸實(shí)現(xiàn)目錄樹結(jié)構(gòu)代碼實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

整理文檔,搜刮出一個(gè)Angular directive遞歸實(shí)現(xiàn)目錄樹結(jié)構(gòu)代碼實(shí)例代碼,稍微整理精簡一下做下分享。

效果圖:

重點(diǎn):

1. 整棵目錄樹的實(shí)現(xiàn),通過嵌套完成,主要在于對(duì)treeItem.html的遞歸使用

  <script type="text/ng-template" id="treeView.html">

    <ul>

      <li ng-repeat="item in treeData.children" ng-include="'treeItem.html'"></li>

    </ul>

  </script>

  

  <script type="text/ng-template" id="treeItem.html">

    <span class="color-indictor" ng-class="{'leaf-node': isLeaf(item), 'expand-node': !isLeaf(item) && item.isExpand, 'unexpand-node': !isLeaf(item) && !item.isExpand}" ng-click="toggleExpandStatus(item)"></span>

    <span>{{item.name}}</span>

    <ul ng-if="!isLeaf(item)" ng-show="item.isExpand">

      <li ng-repeat="item in item.children" ng-include="'treeItem.html'"></li>

    </ul>

  </script>

2. 點(diǎn)擊展開/關(guān)閉目錄樹

通過ng-show對(duì)item.expand進(jìn)行判斷,點(diǎn)擊item時(shí)切換其expand參數(shù),完成目錄樹的打開與關(guān)閉

3. 源碼

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular.js"></script>
<script>
angular.module("treeApp", [])
.controller("treeController", function($scope){
  $scope.jsonData = {
    name: 'menu',
    children: [{
      name: 'A',
      children: [{
        name: 'A.1',
        children: [{
          name: 'A.1.1',
          children: []
        }]
      },{
        name: 'A.2',
        children: [{
          name: 'A.2.1',
          children: [{
            name: 'A.2.1.1',
            children: []
          }]
        },{
          name: 'A.2.2',
          children: []
        }]
      }]
    },{
      name: 'B',
      children: [{
        name: 'B.1',
        children: []
      },{
        name: 'B.2',
        children: []
      }]
    },{
      name: 'C',
      children: []
    }]
  };
}).directive('treeView', function(){
  return {
    restrict: 'E',
    templateUrl: 'treeView.html',
    scope: {
      treeData: '='
    },
    controller: function($scope){
      $scope.isLeaf = function(item){
        return !item.children || !item.children.length;
      };
      $scope.toggleExpandStatus = function(item){
        item.isExpand = !item.isExpand;
      };
    }
  };
});
</script>
<style>
ul{
  list-style: none;
}
.color-indictor{
  display: inline-block;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.color-indictor.leaf-node{
  background: red;
}
.color-indictor.unexpand-node{
  background: green;
}
.color-indictor.expand-node{
  background-color: yellow;
}
</style>
<body ng-app="treeApp" ng-controller="treeController">
  <div>
  <p>Introduce: Click green block expand the menu tree</p>
  <p>Red: Leaf node, can not click</p>
  <p>Green: Unexpand node, click to expand menu</p>
  <p>Yellow: Expanded node, click to unexpand menu</p>
  </div>
  <tree-view tree-data="jsonData"></tree-view>
</body>

<script type="text/ng-template" id="treeView.html">
  <ul>
    <li ng-repeat="item in treeData.children" ng-include="'treeItem.html'"></li>
  </ul>
</script>
<script type="text/ng-template" id="treeItem.html">
  <span class="color-indictor" ng-class="{'leaf-node': isLeaf(item), 'expand-node': !isLeaf(item) && item.isExpand, 'unexpand-node': !isLeaf(item) && !item.isExpand}" ng-click="toggleExpandStatus(item)"></span>
  <span>{{item.name}}</span>
  <ul ng-if="!isLeaf(item)" ng-show="item.isExpand">
    <li ng-repeat="item in item.children" ng-include="'treeItem.html'"></li>
  </ul>
</script>

以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • AngularJS實(shí)現(xiàn)與后臺(tái)服務(wù)器進(jìn)行交互的示例講解

    AngularJS實(shí)現(xiàn)與后臺(tái)服務(wù)器進(jìn)行交互的示例講解

    今天小編就為大家分享一篇AngularJS實(shí)現(xiàn)與后臺(tái)服務(wù)器進(jìn)行交互的示例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • 實(shí)例詳解angularjs和ajax的結(jié)合使用

    實(shí)例詳解angularjs和ajax的結(jié)合使用

    本篇文章給大家介紹angularjs和ajax的結(jié)合使用,本文介紹的非常詳細(xì),對(duì)angularjs和ajax感興趣的朋友一起參考下吧
    2015-10-10
  • AngularJS動(dòng)態(tài)菜單操作指令

    AngularJS動(dòng)態(tài)菜單操作指令

    在我們創(chuàng)建一個(gè)angularJS應(yīng)用的時(shí)候,菜單往往往是不可或缺的元素之一。接下來通過本文給大家介紹AngularJS動(dòng)態(tài)菜單操作指令,感興趣的朋友一起學(xué)習(xí)吧
    2017-04-04
  • Angularjs使用directive自定義指令實(shí)現(xiàn)attribute繼承的方法詳解

    Angularjs使用directive自定義指令實(shí)現(xiàn)attribute繼承的方法詳解

    這篇文章主要介紹了Angularjs使用directive自定義指令實(shí)現(xiàn)attribute繼承的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了基于directive自定義指令實(shí)現(xiàn)attribute繼承的具體步驟與相關(guān)技巧,需要的朋友可以參考下
    2016-08-08
  • Angular 路由route實(shí)例代碼

    Angular 路由route實(shí)例代碼

    下面小編就為大家?guī)硪黄狝ngular 路由route實(shí)例代碼。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-07-07
  • Angular2使用Guard和Resolve進(jìn)行驗(yàn)證和權(quán)限控制

    Angular2使用Guard和Resolve進(jìn)行驗(yàn)證和權(quán)限控制

    本篇文章主要介紹了Angular2使用Guard和Resolve進(jìn)行驗(yàn)證和權(quán)限控制,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-04-04
  • 使用RxJS更優(yōu)雅地進(jìn)行定時(shí)請(qǐng)求詳析

    使用RxJS更優(yōu)雅地進(jìn)行定時(shí)請(qǐng)求詳析

    這篇文章主要給大家介紹了關(guān)于如何使用RxJS更優(yōu)雅地進(jìn)行定時(shí)請(qǐng)求的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用RxJS具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-06-06
  • angularjs1.5 組件內(nèi)用函數(shù)向外傳值的實(shí)例

    angularjs1.5 組件內(nèi)用函數(shù)向外傳值的實(shí)例

    今天小編就為大家分享一篇angularjs1.5 組件內(nèi)用函數(shù)向外傳值的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • Angular 4.0學(xué)習(xí)教程之架構(gòu)詳解

    Angular 4.0學(xué)習(xí)教程之架構(gòu)詳解

    作為一種大受歡迎的Web應(yīng)用程序框架,Angular終于迎來了版本4.0,下面這篇文章主要給大家介紹了關(guān)于Angular 4.0學(xué)習(xí)教程之架構(gòu)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來一起看看吧。
    2017-09-09
  • 分享使用AngularJS創(chuàng)建應(yīng)用的5個(gè)框架

    分享使用AngularJS創(chuàng)建應(yīng)用的5個(gè)框架

    如果你計(jì)劃使用AngularJS創(chuàng)建你的Web應(yīng)用,那現(xiàn)在就開始吧。你不需要有任何的恐懼和擔(dān)心,因?yàn)楝F(xiàn)在有很多的框架都可以很好地支持AngularJS
    2015-12-12

最新評(píng)論