使用ng-click在范围内定位元素

时间:2013-11-28 16:53:50

标签: javascript angularjs angularjs-ng-click

是否有一种简单的方法可以定位范围内的元素并更改类名称或样式。

我曾经使用过Jquery,只是使用.parent()。find来定位相对元素,但找不到一个简单的解决方案来完成一个非常简单的任务。

大多数解决方案似乎非常复杂,我确信角度消除了对大量代码的需求。

我想要相对于ng-click元素或从作用域的根目标进行定位并应用新的类名。

这是一个非常基本的场景,我需要按钮来改变H1的类。

<div>
    <h1 class="Blue">Welcome</h1>
    <ul>
       <li>
           <button ng-click="myFunction()">Change H1 to Red</button>
       </li>
    </ul>
</div>

任何建议都将受到赞赏。

1 个答案:

答案 0 :(得分:8)

如果要切换课程,最好使用ng-class并启用某些属性:

<强> HTML:

<div>
    <h1 ng-class="{Blue: !clicked, Red: clicked}">Welcome</h1>
    <ul>
       <li>
           <button ng-click="myFunction()">Change H1 to Red</button>
       </li>
    </ul>
</div>

<强>控制器:

$scope.myFunction = function() {
   $scope.clicked = true;
}

但是,您可以在函数中传入$event以获取原始元素。虽然,这不会是&#34; angular&#34;做事的方式:

<强> HTML:

<button ng-click="myFunction($event)">Change H1 to Red</button>

<强>控制器:

$scope.myFunction = function(e) {
   console.log(e.srcElement);
}