javascript - Angular 中 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>