使用角度ng-click和ng-class更改类

时间:2017-01-25 15:07:48

标签: javascript jquery angularjs

我有一系列带子菜单的菜单项,它们都有一个向下倾斜的图标,它应该使用类rotate180向上翻转。问题是,我无法隔离功能,以至于它只发生在我打开的菜单中,而不是全部。另外,我需要它根据打开或关闭的菜单保持在所需的位置。通过点击菜单打开/关闭菜单,或者打开菜单后取消图标翻转。希望这是有道理的。

这是我的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>

和控制器

$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";
};

1 个答案:

答案 0 :(得分:0)

由于您只需要切换rotate180类,我会将静态类保留在class属性中,并在ng-class中保留更改:

<span class="ti-icon ti-mini right ti-angle-down" ng-class="{'rotate180': rotate}"></span>

并在控制器中:

$scope.rotate = false; //initial value 
$scope.changeClass = function() { 
     $scope.rotate = !$scope.rotate;
}