[英]change a class using angular ng-click and ng-class
I have a series of menu items with submenus and they all have an angle-down icon that it's supposed to flip upwards using a class rotate180
. 我有一系列带有子菜单的菜单项,它们都有一个向下倾斜的图标,应该使用
rotate180
类将其向上翻转。 Problem is, I can't isolate the functionality so that it only happens in the menu I am opening and not all of them. 问题是,我无法隔离功能,以使其仅出现在我打开的菜单中,而不是全部出现在菜单中。 ALSO, I need it to stay in the desired position according to the menu being open or closed.
另外,我需要根据打开或关闭的菜单将其保持在所需的位置。 By either opening/closing the menu on clicking it or by canceling the icon flip once menu is opened.
通过在单击菜单时打开/关闭菜单,或在菜单打开后取消图标翻转。 Hope that makes sense.
希望有道理。
Here is my html 这是我的html
<div class="menu-item">
<md-list id="playerTrigger" ng-click="menuIsOpen = 1; changeClass()" layout="row" layout-padding="" class="layout-row" layout-align="center center" flex>
<span class="title flex" flex=""> Players</span>
<span ng-class="class"></span>
</md-list>
<div class="sub-menu" ng-show="menuIsOpen===1" ng-animate="'animate'">
<md-menu-item ng-repeat="item in vm.players">
<md-button>
<div layout="row" flex="">
<a ui-sref="{{item.linkto}}" class="">
<p flex="">{{item.title}}</p>
</a>
</div>
</md-button>
</md-menu-item>
</div>
</div>
And the controller 和控制器
$scope.class = "ti-icon ti-mini right ti-angle-down";
$scope.changeClass = function() {
if ($scope.class === "ti-icon ti-mini right ti-angle-down")
$scope.class = "ti-icon ti-mini right ti-angle-down rotate180";
else
$scope.class = "ti-icon ti-mini right ti-angle-down";
};
Since you only need to toggle rotate180
class, I would keep the static classes in class
attribute and the changing one in ng-class
: 由于您只需要切换
rotate180
类,因此我将静态类保留在class
属性中,将变化的class
保留在ng-class
:
<span class="ti-icon ti-mini right ti-angle-down" ng-class="{'rotate180': rotate}"></span>
and in the controller: 并在控制器中:
$scope.rotate = false; //initial value
$scope.changeClass = function() {
$scope.rotate = !$scope.rotate;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.