ng-show 和 ng-hide 的行为答案

【问题标题】：Behavior with ng-show and ng-hide in angularng-show 和 ng-hide 的行为
【发布时间】：2016-04-08 23:12:09
【问题描述】：

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

Idk 如何更改“活动”，还有其他解决方案吗？

【问题讨论】：

你想达到什么目标？
这里只是一个友好的提示...$scope.imgbtn = !$scope.imgbtn; 而不是你在那里做的三元的事情。
您可以使用 ng-class 来交换 fa 类，而不是使用 2 个单独的 dom 元素。此外，“问题是当单击另一个按钮时，十字不会改变。”这是什么意思？代码中的另一个按钮在哪里？它在同一个控制器中吗？
ajmajmajma ，是的，是同一个控制器，我添加了一些图像。

标签： javascript angularjs html angularjs-scope

【解决方案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>

【讨论】：

请 kabaehr 你能再次帮助我，拜托。
当然，你有什么问题？