Question

我在点击按钮后做了一个小例子来更改ng-hide的值，但它没有用。

我试过了：

＆＃13;

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

＆＃13;

<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>

＆＃13;

我的问题是：我错过了什么？

Answer 1

删除模板中隐藏的括号..这将有所帮助。

ng-hide="hide"

Answer 2

您可以使用ternary条件，例如

top

Answer 3

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

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

即可

ng-hide="hide"

有关详细信息，请参阅here。

＆＃13;

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

＆＃13;

<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>

＆＃13;

单击按钮时更改ng-hide值

3 个答案: