ng-if 在 ng-click 按钮上没有改变答案

【问题标题】：ng-if didn't change on ng-click buttonng-if 在 ng-click 按钮上没有改变
【发布时间】：2018-11-14 09:25:22
【问题描述】：

我想在 Angular JS 中使用 ng-if 将单词从我更改为您的。所以我使用了这段代码：

 <span class="label-information-text" ng-if="changeValue" >me </span>
                <span class="label-information-text" ng-if="!changeValue"> your</span>
                <span class="label-edit-text pointer" ng-click="change()">CHANGE </span>

我用了这个js：

 self.changeValue = true;
        $scope.change = function () {
          if(self.changeValue === false){

            self.changeValue = true;
          console.log('true');
          }
          else{
            self.changeValue = false;
            console.log('false');
          }

        }

【问题讨论】：

您是否在控制台中获得了该 console.log() 值？
你的控制器是写成ng-controller="myCtrl"还是ng-controller="myCtrl as vm"？您正在使用self，我假设它是控制器本身，即var self = this;。因此，您到处都需要 controllerAs 语法。将 $scope.change 更改为 self.change 并在 HTML 中使用 vm.change() 等。

标签： angularjs if-statement boolean

【解决方案1】：

您的逻辑是正确的，但有一些变化如下。

var app = angular.module('test', []);

app.controller('MainCtrl', function($scope) {
var self = this;

 self.changeValue = true;
        self.change = function () {
          if(self.changeValue === false){

            self.changeValue = true;
          console.log('true');
          }
          else{
            self.changeValue = false;
            console.log('false');
          }

        }
});

<!DOCTYPE html>
<html ng-app="test">

  <head>
    <meta charset="utf-8" />

    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>


    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl as $ctrl">

 <span class="label-information-text" ng-if="$ctrl.changeValue" >me </span>
                <span class="label-information-text" ng-if="!$ctrl.changeValue"> your</span>
                </br>
                <span class="label-edit-text pointer" ng-click="$ctrl.change()">CHANGE </span>
                
              
  </body>

</html>

【讨论】：

【解决方案2】：

ngShow 指令根据提供给 ngShow 属性的表达式显示或隐藏给定的 HTML 元素。当 ngShow 表达式的计算结果为假值时.ng-hide CSS 类被添加到元素的 class 属性中，导致它被隐藏。如果为真，则 .ng-hide CSS 类会从元素中移除，导致元素不会显示为隐藏。

ngIf 与 ngShow 和 ngHide 的不同之处在于 ngIf 完全删除并重新创建 DOM 中的元素，而不是通过 display css 属性更改其可见性。

请注意，当使用 ngIf 删除元素时，其作用域被破坏并在元素恢复时创建一个新范围。

你应该使用ng-show，

要成功。

【讨论】：

【解决方案3】：

这是工作代码：

    <button class="btn" ng-click="change()">CHANGE </button>
      <span class="label-information-text" ng-if="changeValue" ><b>ME</b> </span>
    <span class="label-information-text" ng-if="!changeValue"> <b>YOUR</b></span>

$scope.changeValue = true;
        $scope.change = function () {
          if($scope.changeValue === false){

            $scope.changeValue = true;
          console.log('true');
          }
          else{
            $scope.changeValue = false;
            console.log('false');
          }

        }

plunker：http://plnkr.co/edit/ndDbpsPiY20BbmSgHqCW?p=preview

【讨论】：