<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .box1 { width: 100px; height: 100px; background: red; } .box2 { width: 100px; height: 100px; background: red; } </style> <script src="angular.min.js"></script> <script> var myapp = angular.module("myapp",[]); myapp.controller("myCtrl",function ($scope) { $scope.show = true; $scope.check = function () { $scope.show = !$scope.show; } $scope.hide = true; $scope.fun = function () { $scope.hide = !$scope.hide; } }); </script> </head> <body ng-app="myapp" ng-controller="myCtrl"> <div class="box1" ng-show="show" ng-click="{box:true}"></div> <button ng-click="check()">切换</button> <div class="box2" ng-hide="hide" ng-click="{box:true}"></div> <button ng-click="fun()">点击</button> </body> </html>
图片的显示和隐藏
最新推荐文章于 2021-06-03 10:35:27 发布