用角度ng单击旋转图标

Question

我正在构建一个可折叠的下拉垂直菜单，除使我无法理解的所有功能外，我已经完成了大多数其他功能。也就是说，旋转图标，使其在打开时显示，在关闭时指向下方。

我有一个可以使用的CodePen。我更新了下面的代码以显示现在最接近解决方案的更改。

这是我的HTML

<div class="cnt">
    <div class="menu-item" ng-click="toggle(1); open1=!open1">
        <md-list layout="row" layout-padding="" class="layout-row" layout-align="start center" flex> 
            <span class="title flex" flex=""> Menu Item</span>
            <i class="fa fa-chevron-down" ng-class="{'fa fa-chevron-down rotate180': open1, 'fa fa-chevron-down': !open1}"></i>
        </md-list>
        <div class="sub-menu" ng-animate="'animate'" >
            <md-menu-item ng-if="menuIsOpen===1" ng-repeat="item in data"  >
                <md-button>
                    <div layout="row" flex="">
                        <a ui-sref="{{item.link}}">
                            <p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.title}}</p>
                        </a>
                    </div>
                </md-button>
            </md-menu-item>
        </div>
    </div>
    <div class="menu-item" ng-click="toggle(2); open2=!open2">
        <md-list layout="row" layout-padding="" class="layout-row" layout-align="start center" flex> 
            <span class="title flex" flex=""> Menu Item 2</span>
            <i class="fa fa-chevron-down" ng-class="{'fa fa-chevron-down rotate180': open2, 'fa fa-chevron-down': !open2}"></i>
        </md-list>
        <div class="sub-menu" ng-animate="'animate'" >
            <md-menu-item ng-if="menuIsOpen===2" ng-repeat="item in data2">
                <md-button>
                    <div layout="row" flex="">
                        <a ui-sref="{{item.link}}">
                            <p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.title}}</p>
                        </a>
                    </div>
                </md-button>
            </md-menu-item>
        </div>
    </div>
</div>      

这是我的控制器内部的内容。切换功能是锻炼，我想，将图标旋转附加到此功能以使其一起工作可能是一个好主意。但是我很难弄清楚。我最接近的是下面的此功能。但是它会在一次单击中更改所有图标

$scope.open1 = false; //initial value
$scope.open2 = false; //initial value

$scope.toggle = function(itemPos) {
    if ($scope.menuIsOpen === itemPos) {
        $scope.menuIsOpen = 0;
    }
    else {
        $scope.menuIsOpen = itemPos;
    }
}

AngularJS或JavaScript解决方案都可以。我更喜欢AngularJS。请没有自举建议。这是Angular Material应用程序。它不使用Bootstrap。再次感谢！

Answer 1

如果您需要为菜单图标的打开和关闭设置动画，您还可以应用具有不同 CSS 转换属性的 2 个不同的 CSS 类。

并使用 ng-class 相应地使用 2 个表达式：

超文本标记语言

ng-class="{'fa fa-chevron-down rotate180': open1, 'fa fa-chevron-down rotate-back': !open1}"

CSS 类

.rotate180 {
    display: inline-block;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: all linear 200ms;
    transition: all linear 200ms;
}

.rotate-back {
    display: inline-block;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: all linear 200ms;
    transition: all linear 200ms;
}

密码笔

http://codepen.io/alexincarnati/pen/zNEPoW