ng-show和ng-hide的角度行为

Question

这是我的代码： HTML：

<div ng-controller="ButtonController">
   <button class=" circle-white btn btn-collapse-custom" ng-click="collapse(1); toggleBtn()">
     <i ng-show="imgbtn" class="fa fa-chevron-down"></i>
     <i ng-hide="imgbtn" class="fa fa-times"></i>
  </button>
</div>

JS：

'use strict'

module.exports = function($scope , $rootScope ){
  $scope.imgbtn = true;
  $scope.toggleBtn = function() {
      $scope.imgbtn = $scope.imgbtn === false ? true: false;
  };
};

这项工作很好。

问题是当点击另一个按钮时，前一次点击保持活动状态，因此十字架不会改变。

first button , when clicked

Now another button is clicked , and previous is active yet

如何更改“有效”，任何其他解决方案？

Answer 1

只是猜测你想要达到的目标，但你应该试试这个：

<div ng-controller="ButtonController">
    <button class=" circle-white btn btn-collapse-custom" ng-click="collapse(1); imbtn = !imbtn">
       <i ng-class="{'fa fa-chevron-down': imbtn, 'fa fa-times': !imbtn}">
       </i>
    </button>
</div>