在可视隐藏和可视之间切换不起作用

toggling between visiblity hidden and visible doesnt work

本文关键字：可视 不起作用 隐藏 之间      更新时间：2023-09-26

当我单击元素时，代码似乎只会隐藏它，但当我再次单击元素时它不会重新出现。

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

提前感谢：）

ng-show指令怎么样？

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

样式被称为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>

工作程序

您也可以使用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
   }
});
相关文章：