单击父元素时更改儿童类

有没有更有效的方法可以通过角来更改或向父元素的子元素添加类：父元素被单击时，除此之外获取函数中的所有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

单击父元素时更改儿童类

回答

相关问题