JQuery to Angularjs

-3

我有以下html和jQuery代碼。在這裏，我正在做什麼，當點擊任何UL項目時，其相關的li已經動態地設置了他們的位置跟隨jquery代碼。JQuery to Angularjs

現在我的要求是，我想在我的AngularJS中使用下面的html。在ng-repeat內部，我必須在ng-repeat中爲每個項目設置所有跟隨它的項目的ul。

因此，點擊任何ng-repeat項目的ul。我必須在angularjs表達式內或使用controll動態設置它的li。如果有任何指令可以幫助設置。

我的HTML代碼：

<ul class="navs"> 
    <li><a href="#" title="A"><span class="ocui posts__icon"></span></a></li> 
    <li><a href="#" title="B"><span class="ocui posts__icon"></span></a></li> 
    <li><a href="#" title="C"><span class="ocui posts__icon"></span></a></li> 
    <li><a href="#" title="D"><span class="ocui posts__icon"></span></a></li> 
</ul>

JQuery的 - 在UL點擊

 var ul=$(".navs"); 
     ul.click(function(e){ 
      var li=$(this).find('li'), 
       i=li.length, 
       n=i-1, 
       r=140; 
      $(this).toggleClass('active'); 
      $(this).parent().find('.posts__overlay').toggleClass('active-overlay'); 
      if($(this).hasClass('active')){ 

       for(var a=0;a<i;a++){ 
        li.eq(a).css({ 
         'transition-delay':""+(50*a)+"ms", 
         '-webkit-transition-delay':""+(50*a)+"ms", 
         'left':(r*Math.cos(90/n*a*(Math.PI/180))-10), 
         'top':(-r*Math.sin(90/n*a*(Math.PI/180))-15) 
        }); 
       } 
      }else{ 
       li.removeAttr('style'); 
      } 
     });

解決方案：

我都做到了，按如下：

<ul data-ng-class="{navs:true , 'active': activeUl}" data-ng-click="activeUl = !activeUl"> 
    <li data-ng-style="activeUl ? { 'transition-delay':'0ms', 'left': '130px', 'top': '-15px' } : { }"><a href="#" title="Report"><span class="ocui posts__icon"></span></a></li> 
    <li data-ng-style="activeUl ? { 'transition-delay':'50ms', 'left': '111.244px', 'top': '-85px' } : { }"><a href="#" title="Block"><span class="ocui posts__icon"></span></a></li> 
    <li data-ng-style="activeUl ? { 'transition-delay':'100ms', 'left': '60px', 'top': '-136.244px' } : { }"><a href="#" title="Follow"><span class="ocui posts__icon"></span></a></li> 
    <li data-ng-style="activeUl ? { 'transition-delay':'150ms', 'left': '-10px', 'top': '-155px' } : { }"><a href="#" title="Message"><span class="ocui posts__icon"></span></a></li> 
</ul>

來源

2016-03-04 Ghazni

肯定有可以使用的幾個核心指令...'NG-click'，'NG-class'，NG-'樣式'。還有ngAnimate。你也可能需要你自己的指令。你有什麼具體問題？ – charlietfl

我是angularjs中的新成員，所以如果您提供了一些在運行時更改css的示例，如何編寫指令。 – Ghazni

這不是一個代碼轉換網站。你需要自己做一些嘗試 – charlietfl

解決這個角方式可以組合內ng-click和ng-class之間完成：

<li ng-click="makeItJumpOrRollback()" ng-class="{ 'jump': shouldJump }"></li>

然後在你的控制器是這樣的：

$scope.shouldJump = false; 

$scope.makeItJumpOrRollback = function() { 
    $scope.shouldJump = !$scope.shouldJump; 
}

jump將被添加到你的元素類只有當shouldJump是true並被刪除，否則，所以你只需要設置其相關的CSS：.jump { ... }

更多ng-class可以在本教程中找到：

https://scotch.io/tutorials/the-many-ways-to-use-ngclass

來源

2016-03-04 15:21:11

由於OP代碼使用切換，您應該使用'$ scope.shouldJump =！$ scope.shouldJump'。 – jcubic

你是對的@jcubic謝謝！我一直在想一個簡單的例子來展示兩個指令如何組合，而不是重寫jQuery代碼。 –

JQuery to Angularjs

回答

相關問題