By GokiSoft.com| 19:43 03/10/2022|
AngularJS

[Source Code] Tìm hiểu Directive & Filter & SPA trong AngularJS - C2206L

#vidu.html


<!DOCTYPE html>
<html ng-app="MyApp" ng-init="title='OKOK'">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

	<title>AngularJS for beginner</title>
</head>
<body ng-controller="MyController">
<div class="container">
	<div class="card mt-3">
		<div class="card-header bg-info text-white">
			CONTACT US {{title}}
		</div>
		<div class="card-body">
			<form method="post" ng-submit="saveData()">
				<div class="form-group mb-3">
					<label>Full Name: </label>
					<input required type="text" name="fullname" class="form-control" placeholder="Enter fullnane" ng-model="fname">
				</div>
				<div class="form-group mb-3">
					<label>Email: </label>
					<input required type="email" name="email" class="form-control" placeholder="Enter email" ng-model="email">
				</div>
				<div class="form-group mb-3">
					<label>Phone Number: </label>
					<input required type="telno" name="phone" class="form-control" placeholder="Enter phone" ng-model="phone">
				</div>
				<div class="form-group mb-3">
					<label>Subject: </label>
					<input required type="text" name="subject" class="form-control" placeholder="Enter subject" ng-model="subject">
				</div>
				<div class="form-group mb-3">
					<label>Message: </label>
					<textarea required rows="5" class="form-control" ng-model="msg"></textarea>
				</div>
				<div class="form-group mb-3">
					<button class="btn btn-success">Save Data</button>
					<button class="btn btn-warning" type="button" ng-click="resetData()">Reset Form</button>
					<p>
						<label><input type="checkbox" ng-model="feedback_on_off"> On/Off Contact Management</label>
					</p>
				</div>
			</form>
		</div>
	</div>

	<div class="card mt-3" ng-show="feedback_on_off">
		<div class="card-header bg-warning text-white">
			CONTACT MANAGEMENT
		</div>
		<div class="card-body">
			<input type="text" name="s" placeholder="Enter search ..." class="form-control" style="width: 300px" ng-model="s">
			<table class="table table-bordered table-hover mt-3">
				<thead>
					<tr>
						<th>STT</th>
						<th>Full Name</th>
						<th>Email</th>
						<th>Phone</th>
						<th>Subject</th>
						<th>Message</th>
						<th style="width: 50px;"></th>
						<th style="width: 50px;"></th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="item in feedbackList | filter:s">
						<td>{{ $index + 1 }}</td>
						<td>{{ item.fullname | uppercase }}</td>
						<td>{{ item.email | lowercase }}</td>
						<td>{{ item.phone | currency:'':0 }}</td>
						<td>{{ item.subject }}</td>
						<td>{{ item.message }}</td>
						<td>
							<button class="btn btn-warning" ng-click="editItem($index)">Edit</button>
						</td>
						<td>
							<button class="btn btn-danger" ng-click="deleteItem($index)">Delete</button>
						</td>
					</tr>
				</tbody>
			</table>

			<table class="table table-bordered table-hover mt-3">
				<thead>
					<tr>
						<th>STT</th>
						<th>Full Name</th>
						<th>Email</th>
						<th>Phone</th>
						<th>Subject</th>
						<th>Message</th>
						<th style="width: 50px;"></th>
						<th style="width: 50px;"></th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="item in feedbackList | searching:s">
						<td>{{ $index + 1 }}</td>
						<td>{{ item.fullname | uppercase }}</td>
						<td>{{ item.email | lowercase }}</td>
						<td>{{ item.phone }}</td>
						<td>{{ item.subject }}</td>
						<td>{{ item.message }}</td>
						<td>
							<button class="btn btn-warning" ng-click="editItem($index)">Edit</button>
						</td>
						<td>
							<button class="btn btn-danger" ng-click="deleteItem($index)">Delete</button>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>

<script type="text/javascript">
	var app = angular.module('MyApp', [])

	app.filter('searching', function() {
		return function(feedbackList, s) {
			if(s == undefined || s == '' || s == null) {
				return feedbackList;
			}

			s = s.toLowerCase()
			var newItems = []

			for(var item of feedbackList) {
				if(item.fullname.toLowerCase().includes(s) || item.phone.toLowerCase().includes(s)) {
					newItems.push(item)
				}
			}

			return newItems;
		}
	})

	app.controller('MyController', ['$scope', function ($scope) {
		$scope.feedbackList = []
		$scope.currIndex = -1
		$scope.feedback_on_off = true

		$scope.saveData = function() {
			var data = {
				"fullname": $scope.fname,
				"email": $scope.email,
				"phone": $scope.phone,
				"subject": $scope.subject,
				"message": $scope.msg
			}
			if($scope.currIndex >= 0) {
				$scope.feedbackList[$scope.currIndex] = data
				$scope.currIndex = -1
			} else {
				$scope.feedbackList.push(data)
			}
		}

		$scope.deleteItem = function(index) {
			var option = confirm('Are you sure to delete this item?')
			if(!option) return

			$scope.feedbackList.splice(index, 1)
		}

		$scope.editItem = function(index) {
			$scope.currIndex = index

			$scope.fname = $scope.feedbackList[index].fullname
			$scope.email = $scope.feedbackList[index].email
			$scope.phone = $scope.feedbackList[index].phone
			$scope.subject = $scope.feedbackList[index].subject
			$scope.msg = $scope.feedbackList[index].message
		}

		$scope.resetData = function() {
			$scope.fname = ""
			$scope.email = ""
			$scope.phone = ""
			$scope.subject = ""
			$scope.msg = ""
		}
	}])
</script>
</body>
</html>


#vidu2.html


<!DOCTYPE html>
<html ng-app="MyApp" ng-init="title='OKOK'">
<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1"/>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

	<title>AngularJS for beginner</title>
</head>
<body ng-controller="MyController">
{{title}}
<div class="container" ng-controller="MyController1">
	{{title}}
</div>
<div class="container" ng-controller="MyController2">
	{{title}}
</div>
<div class="container" ng-controller="MyController3">
	{{title}}
</div>

<script type="text/javascript">
	var app = angular.module('MyApp', [])

	app.controller('MyController', ['$scope', function ($scope) {
		$scope.title = "Xin Chao"
	}])

	app.controller('MyController1', ['$scope', function ($scope) {
		$scope.title = "Xin Chao 1"
	}])

	app.controller('MyController2', ['$scope', function ($scope) {
		$scope.title = "Xin Chao 2"
	}])

	app.controller('MyController3', ['$scope', function ($scope) {
		$scope.title = "Xin Chao 3"
	}])
</script>
</body>
</html>
Route



#index.html


<!DOCTYPE html>
<html ng-app="MyApp">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>SPA Tutorial</title>

	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
</head>
<body ng-controller="MyController">
	<h1>Index {{title}}</h1>
	<ul>
		<li><a href="#!page1">Page 1</a></li>
		<li><a href="#!page2">Page 2</a></li>
	</ul>
	<!-- Thanh phan khac nhau cua tung page -->
	<div ng-view></div>
	<!-- Khac nhau -->
	<h1>Footer</h1>

<script type="text/javascript">
	var app = angular.module('MyApp', ["ngRoute"])

	app.config(function($routeProvider) {
	    $routeProvider
	    .when("/", {
	        templateUrl : "page1.html",
	        controller: "MyController"
	    })
	    .when("/page1", {
	        templateUrl : "page1.html",
	        controller: "MyController"
	    })
	    .when("/page2", {
	        templateUrl : "page2.html",
	        controller: "MyController"
	    });
	});

	app.controller('MyController', ['$scope', function ($scope) {
		$scope.title = "Xin Chao"

	}])
</script>
</body>
</html>


#page1.html


<h1>Page 1</h1>


#page2.html


<h1>Page 2</h1>


Tags:



Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó