jQuery的應用與angularjs

這是我的html代碼jQuery的應用與angularjs

<body ng-app="mainapp"> 
<div id="wrapper"> 
<div class="tree" ng-controller="MenuController"> 
    <ul> 
    <li ng-repeat="menu in menulist"> 
     <a>{{menu.title}}</a> 
     <ul> 
      <li ng-repeat="submenu in menu.children"><a href="#">{{submenu.title}}</a></li> 
     </ul> 
    </li> 
    </ul> 
</div>

這是jQuery代碼

<script type="text/javascript"> 
jQuery(document).ready(function() { 

    jQuery('.tree li').each(function() { 

     if(jQuery(this).children('ul').length > 0) { 
       jQuery(this).addClass('parent');  
     } 
    }); 

});

各的jQuery的不能正常工作。如果我複製jQuery代碼並應用在瀏覽器控制檯上，它就可以工作。

發現小提琴http://fiddle.jshell.net/rrs_1989/3qeorfbe/

來源

2015-04-30 Rakesh

讓它成爲小提琴嗎？ –

你可以簡單地通過使用角度ng-class指令像ng-class="{ parent: menu.children.length > 0 }"

<div class="tree" ng-controller="MenuController"> 
    <ul> 
    <li ng-repeat="menu in menulist"> 
     <a>{{menu.title}}</a> 
     <ul ng-class="{ parent: menu.children.length > 0 }"> 
      <li ng-repeat="submenu in menu.children"><a href="#">{{submenu.title}}</a></li> 
     </ul> 
    </li> 
    </ul> 
</div>

更新

實現你將永遠不會得到ng-repeat的角度渲染DOM，ng-repeat並呈現每個通過循環播放項目。這需要一些時間。您可以在使用指令完成ng-reapeat呈現時跟蹤此情況。

angular.module('myApp', []) 
.directive('myRepeatDirective', function() { 
    return function(scope, element, attrs) { 
     if (scope.$last) { 
      //here the ng-repeat ends 
      //do some action o DOM manipulation from here 
      //you have rendered DOM of ng-repeat 
     } 
    }; 
})

來源

2015-04-30 05:54:34

@Rakesh有幫助嗎？ –

而不是檢查主禮是否有UL子女或沒有（因爲它總是會），找到主要的李裏面的UL認證，並檢查是否有李後裔：

if($(this).find('ul').children('li').length > 0)

這裏的工作示例： http://codepen.io/ER144/pen/XbbKGz

注意，您的json在fiddler示例中已損壞。

來源

2015-04-30 06:27:20 ER144

jQuery的應用與angularjs

回答

相關問題