Trong ví dụ này, chúng ta sẽ xây dựng một trang web đơn giản để tìm hiểu về cách ẩn hiện dữ liệu với chỉ thị ng-hide trong AngularJS.
Tạo trang index.html với nội dung như sau:
<html>
<head>
<title>T02</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<div style="margin-left:10pt">
<h2>Hide your programming language you don't like.</h2>
<input type="button" class="btn btn-success" value="Show"/> <input type="button" class="btn btn-danger" value="Hide"/><span> C/C++</span><br><br>
<input type="button" class="btn btn-success" value="Show""/> <input type="button" class="btn btn-danger" value="Hide""/><span> C#</span><br><br>
<input type="button" class="btn btn-success" value="Show"/> <input type="button" class="btn btn-danger" value="Hide"/><span> Java</span><br><br>
<input type="button" class="btn btn-success" value="Show"/> <input type="button" class="btn btn-danger" value="Hide"/><span> Python</span><br>
</div>
</body>
</html>
Bổ sung hai chỉ thị ng-click và ng-hide cho nút và thẻ span trong tập tin index.html.
<input type="button" class="btn btn-success" value="Show" ng-click="showEvent()"/>
<input type="button" class="btn btn-danger" value="Hide" ng-click="hideEvent()"/>
<span ng-hide="showhide"> C/C++</span>
<br><br>
<input type="button" class="btn btn-success" value="Show" ng-click="showEvent1()"/>
<input type="button" class="btn btn-danger" value="Hide" ng-click="hideEvent1()"/>
<span ng-hide="showhide1"> C#</span>
<br><br>
<input type="button" class="btn btn-success" value="Show" ng-click="showEvent2()"/>
<input type="button" class="btn btn-danger" value="Hide" ng-click="hideEvent2()"/>
<span ng-hide="showhide2"> Java</span>
<br><br>
<input type="button" class="btn btn-success" value="Show" ng-click="showEvent3()"/>
<input type="button" class="btn btn-danger" value="Hide" ng-click="hideEvent3()"/>
<span ng-hide="showhide3"> Python</span>
<br>
Định nghĩa các hàm cho chỉ thị ng-click.
<script>
var app= angular.module("myApp",[]);
app.controller("myController", function($scope){
//set for Option 1
$scope.showEvent = function(){
$scope.showhide = false;
};
$scope.hideEvent = function(){
$scope.showhide = true;
};
//set for Option 2
$scope.showEvent1 = function(){
$scope.showhide1 = false;
};
$scope.hideEvent1 = function(){
$scope.showhide1 = true;
};
//set for Option 3
$scope.showEvent2 = function(){
$scope.showhide2 = false;
};
$scope.hideEvent2 = function(){
$scope.showhide2 = true;
};
//set for Option 4
$scope.showEvent3 = function(){
$scope.showhide3 = false;
};
$scope.hideEvent3 = function(){
$scope.showhide3 = true;
};
});
</script>
Mã nguồn hoàn chỉnh của trang index.html như sau:
<html>
<head>
<title>T02</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<div style="margin-left:10pt">
<h2>Hide your programming language you don't like.</h2>
<input type="button" class="btn btn-success" value="Show" ng-click="showEvent()"/> <input type="button" class="btn btn-danger" value="Hide" ng-click="hideEvent()"/><span ng-hide="showhide"> C/C++</span><br><br>
<input type="button" class="btn btn-success" value="Show" ng-click="showEvent1()"/> <input type="button" class="btn btn-danger" value="Hide" ng-click="hideEvent1()"/><span ng-hide="showhide1"> C#</span><br><br>
<input type="button" class="btn btn-success" value="Show" ng-click="showEvent2()"/> <input type="button" class="btn btn-danger" value="Hide" ng-click="hideEvent2()"/><span ng-hide="showhide2"> Java</span><br><br>
<input type="button" class="btn btn-success" value="Show" ng-click="showEvent3()"/> <input type="button" class="btn btn-danger" value="Hide" ng-click="hideEvent3()"/><span ng-hide="showhide3"> Python</span><br>
</div>
</body>
<script>
var app= angular.module("myApp",[]);
app.controller("myController", function($scope){
//set for Option 1
$scope.showEvent = function(){
$scope.showhide = false;
};
$scope.hideEvent = function(){
$scope.showhide = true;
};
//set for Option 2
$scope.showEvent1 = function(){
$scope.showhide1 = false;
};
$scope.hideEvent1 = function(){
$scope.showhide1 = true;
};
//set for Option 3
$scope.showEvent2 = function(){
$scope.showhide2 = false;
};
$scope.hideEvent2 = function(){
$scope.showhide2 = true;
};
//set for Option 4
$scope.showEvent3 = function(){
$scope.showhide3 = false;
};
$scope.hideEvent3 = function(){
$scope.showhide3 = true;
};
});
</script>
</html>
Chạy trang index.html trên trình duyệt và kiểm tra kết quả.
Bình luận về bài viết này