Home > Developer > Web Develop
Testshowandhiddern.html
<! DOCTYPE html>
<meta charset= "UTF-8"/>
<title> animation effects: Hide and show </title>
<!--introducing the official standard angular.min.js--
<script src= "Https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js" ></script>
<script src= "Js/dynamic/testshowandhidden.js" ></script>
<body >
<div ng-controller= "Textshowandhiddencontroller" >
<button ng-click= "Showahidden ()" >{{title}}</button >
<ul ng-show= "Status.show" >
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
/test/webcontent/js/dynamic/testshowandhidden.js
var mymodule=angular.module ("MyModule", []);
Mymodule.controller ("Textshowandhiddencontroller", [' $scope ',
function Hellocontroller ($scope) {
Initialize default values
$scope. title= "animation effect: Hide and show ...";
Default hidden
$scope. status={
Show:false
};
After clicking an event: Show or hide
$scope. Showahidden=function () {
$scope. status.show=! $scope. status.show;
}
}
]);
Access path: http://localhost:8080/test/testShowAndHiddern.html
Access effect:
AngularJs: Dynamic effects: Show and hide (this example compares common assignments, hierarchical assignments, event comparisons)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
