單擊父元素時更改兒童類

有沒有更有效的方法可以通過角來更改或向父元素的子元素添加類：父元素被單擊時，除此之外獲取函數中的所有childNode並添加每個孩子上課？單擊父元素時更改兒童類

<div class="menu-icon-container" ng-click="changeState()"> 
    <div ng-repeat="bar in [bar1, bar2, bar3] track by $index" class="bar{{$index + 1}} "></div> 
</div>

期望的結果是被點擊時menu-icon-container，在其內的div將切換基於條件的類。

來源

2017-10-05 Tudor Apostol

您可以使用ng-style指令。只需設置在$範圍的屬性，你可以單擊切換上div.menu-icon-container

<div class="menu-icon-container" ng-click="conditionForClassName = !conditionForClassName"> 
    <div ng-repeat="bar in [bar1, bar2, bar3] track by $index" 
    ng-class="{ 'className': conditionForClassName }"></div> 
</div>

Docs for ngStyle

來源

2017-10-05 15:04:52 Founded1898

可以使用指令

DIRECTIVE

myApp.directive('addClassChild', function($timeout) { 
    var linkFn = function(scope, element, attrs) { 
     element.bind("click", function() { 
     for (var i = 0; i < element[0].children.length+1; i++) { 
      element.children().eq(i).addClass('active'); 
     } 
     }); 
    }; 
return { 
    link: linkFn, 
    restrict: 'A', 
}; 
})

HTML

<div class="menu-icon-container" add-class-child> 
    <div ng-repeat="bar in [bar1, bar2, bar3] " class="bar{{$index + 1}} "> 
     {{$index}} 
    </div> 
</div>

在高層次上，指令是一個DOM元素上的標記（如屬性，元素名稱，註釋或CSS類），告訴AngularJS的HTML編譯器（$編譯）用於連接指定的行爲，即DOM元素（例如通過事件監聽器），甚至可以轉換DOM元素及其子元素。

來源

2017-10-05 15:30:57 Naimad

單擊父元素時更改兒童類

回答

相關問題