Question

当我点击元素时，代码似乎只隐藏它，但是当我再次单击该元素时，它不再出现。

HTML（AngularJS）

<div ng-click="showIt();">Click Me!</div>

<div style="visible:{{tog}};">Hide Me...Then Show Me Again</div>

控制器：

$scope.showIt=function(){
    if($scope.tog="visible"){
      $scope.tog="hidden";
    }
    else{
      $scope.tog="visible";
    }
}

$scope.tog="visible";

提前致谢：）

Answer 1

ng-show指令呢？

<div ng-click="tog = !tog">Click Me!</div>
<div ng-show="tog">Hide Me...Then Show Me Again</div>

Answer 2

该样式在visibility条件下也称为if，您需要使用==而不是=。

但更好的解决方案是使用ng-style指令或使用基于类的解决方案

var app = angular.module('my-app', [], function() {})

app.controller('AppController', function($scope) {
  $scope.showIt = function() {
    if ($scope.tog.visibility == "visible") {
      $scope.tog.visibility = "hidden";
    } else {
      $scope.tog.visibility = "visible";
    }
  }
  $scope.showIt2 = function() {
    $scope.hidden = !$scope.hidden;
  }

  $scope.tog = {
    visibility: "visible"
  };
  $scope.hidden = false;
})

.hidden {
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app">
  <div ng-controller="AppController">
    <div ng-click="showIt()">Click Me!</div>
    <div ng-style="tog">Hide Me...Then Show Me Again</div>
    <hr />
    <div ng-click="showIt2()">Click Me!</div>
    <div ng-class="{hidden: hidden}">Hide Me...Then Show Me Again</div>
  </div>
</div>

Answer 3

Working Plnkr

您也可以使用ng-if指令执行此操作：

<div ng-click="showIt();">Click Me!</div>    
<div ng-if="tog">Hide Me...Then Show Me Again</div>

JavaScript的：

angular.module('myApp', [])
  .controller('MyController', function($scope) {
    $scope.tog = true;
    $scope.showIt=function(){
    $scope.tog=!$scope.tog
   }

});

隐藏和可见之间的可见性之间的切换不起作用

3 个答案: