AngularJS選擇器如jQuery

我有相同的3級div元素的HTML代碼爲：AngularJS選擇器如jQuery

<div class="hide"> 
</div> 

<div class="hide"> 
</div> 

<div class="hide"> 
</div>

在jQuery中我可以隱藏所有的DIV中只有一個代碼語句：$(".hide").hide();。我們如何可以隱藏角度js中單個代碼語句中的所有div？

來源

2017-04-03 user2999294

我有嘗試過ng-show/ng-hide，但有沒有其他方法，其中ic一個只帶選擇器並隱藏角度JS中DOM的所有元素？ – user2999294

'document.getElementsByTagName（「body」）[0] .style.opacity ='0''; ？ – lin

在Angular中執行此操作的正確方法是ng-show/ng-hide。 – estus

您可能所以像這樣（混合AngularJS/jQuery的）：

var results = $document[0].getElementsByClassName("hide"); 
angular.forEach(results, function(result) { 
    var wrappedResult = angular.element(result); 
    wrappedResult.hide(); 
});

然而，混合jQuery的進入AngularJS應用程序通常是令人難以接受的，這只是看起來像真的很髒的代碼，我不會」不想在生產應用程序。

的最好的辦法和「角」的方式做到這一點是隻與外<div>包住多個<div> S和使用ng-show/ng-hide。

<div ng-hide="someTrueVariable"> 
    <div class="hide"></div> 

    <div class="hide"></div> 

    <div class="hide"></div> 
</div>

如果從一個jQuery背景的和正在進入AngularJS，我會高度建議你看看下面的堆棧溢出線程。我真的認爲這將有助於您將AngularJS的發展理念： "Thinking in AngularJS" if I have a jQuery background?

來源

2017-04-03 17:51:23

這麼多，不給jQuery的解決方案.... -.- – lin

因此，「_could_」後面跟着「角度」的方式來說明爲什麼你不想像jQuery開發人員那樣在工作時AngularJS。 –

將元素的類放入屬性hide-element;

HTML：

<div hide-element="hide" class="hide"> 
    hide1 
    </div> 
    <div hide-element="hide"> 
    hide2 
    </div> 
    <div hide-element="hide" class="hide"> 
    hide3 
    </div>

JS：

使用hideElement屬性得到的類名和隱藏有這類

.directive('hideElement', function() { 

    return { 
     restrict: 'A', 
     scope: { 
     hideElement: '@' 
     }, 
     link: function(scope, ele, attr) { 

     var className = scope.hideElement; 
     ele.bind('click', function($event) { 

      angular.element(document.querySelectorAll("." + className)) 
      .css('display', 'none'); 
     }) 
     } 
    } 
    })

那些元素工作demo plunker

來源

2017-04-03 18:19:35

AngularJS選擇器如jQuery

回答

相關問題