Question

我想在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');
          }

        }

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

Answer 2

ngShow 指令根据提供给ngShow属性的表达式显示或隐藏给定的HTML元素。当 ngShow 表达式的计算结果为一个伪造的值，然后将.ng-hide CSS类添加到该元素的class属性，使其隐藏。没错时，.ng-hide CSS类将从元素中删除，从而使元素不会隐藏。

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

请注意，当使用ng删除元素时，如果其作用域被破坏并在还原元素时创建新的作用域。

您应该使用 ng-show ，

要成功。

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

JS

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

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

        }

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

ng-如果ng-click按钮没有变化

3 个答案: