单击按钮时更改 ng-hide 值答案

【问题标题】：Change ng-hide value when clicking button单击按钮时更改 ng-hide 值
【发布时间】：2016-06-20 07:30:24
【问题描述】：

我正在做一个小例子来改变点击按钮后ng-hide的值，但它不起作用。

我试过了：

angular.module('myModule', []).controller('myController', function ($scope) {
  $scope.hide= false
  $scope.change = function () {
    $scope.hide = !$scope.hide  
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myModule" ng-controller="myController">
  <p ng-hide="{{hide}}">some text...</p>
  <button ng-click="change()">change</button>
</div>

还有我的问题：我错过了什么？

【问题讨论】：

浏览器控制台是否出现错误？
ng-hide="hide"
你是把js和html代码放在一个文件里吗？

标签： angularjs

【解决方案1】：

删除模板中 hide 周围的括号。这会有所帮助。

ng-hide="hide"

【讨论】：

赞这个<p ng-hide="hide">some text...</p>

【解决方案2】：

您可以使用ternary 条件，例如

$scope.hide = ($scope.hide) ? false : true;

【讨论】：

谢谢！但它比我现在的陈述要长
这样做有什么好处？

【解决方案3】：

Angular 使用{{...}} 将某些内容标记为表达式。然而hide 已经是一个角度表达式，所以你得到的表达式打破了双向绑定，并且只在页面加载时评估一次......

所以要解决您的问题，只需删除括号

ng-hide="hide"

更多信息请参见here。

angular.module('myModule', []).controller('myController', function ($scope) {
  $scope.hide= false
  $scope.change = function () {
    $scope.hide = !$scope.hide
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myModule" ng-controller="myController">
  <p ng-hide="hide">some text...</p>
  <button ng-click="change()">change</button>
</div>

【讨论】：