[AngularJS] Ẩn hiện thông tin với chỉ thị ng-hide

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

Tạo một blog miễn phí với WordPress.com.

Up ↑