By GokiSoft.com|
19:52 07/10/2022|
AngularJS
[Source Code] Tìm hiểu filter trong AngularJS & custom directive trong AngularJS - C2206L
#data.json
-------- Object ----------
{
"fullname": "TRAN VAN A",
"address": "Ha Noi",
"email": "a@gmail.com"
}
------- Array ------------
[
{
"fullname": "TRAN VAN A",
"address": "Ha Noi",
"email": "a@gmail.com"
},
{
"fullname": "TRAN VAN B",
"address": "Ha Noi",
"email": "a@gmail.com"
},
{
"fullname": "TRAN VAN C",
"address": "Ha Noi",
"email": "a@gmail.com"
}
]
{
"status": 0,
"msg": "Xin Chao"
}
https://gokisoft.com/api/fake/49//c2206l/student/list#vidu.html
<!DOCTYPE html>
<html ng-app="MyApp">
<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
</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>
</div>
</form>
</div>
</div>
<div class="card mt-3">
<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 | 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(item.id)">Edit</button>
</td>
<td>
<button class="btn btn-danger" ng-click="deleteItem(item.id)">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.count = 0
$scope.saveData = function() {
var data = {
"fullname": $scope.fname,
"email": $scope.email,
"phone": $scope.phone,
"subject": $scope.subject,
"message": $scope.msg
}
if($scope.currIndex >= 0) {
data.id = ++$scope.count = $scope.feedbackList[$scope.currIndex].id
$scope.feedbackList[$scope.currIndex] = data
$scope.currIndex = -1
} else {
data.id = ++$scope.count
$scope.feedbackList.push(data)
}
console.log($scope.feedbackList)
}
$scope.deleteItem = function(id) {
var option = confirm('Are you sure to delete this item?')
if(!option) return
var index = $scope.getIndexById(id)
$scope.feedbackList.splice(index, 1)
}
$scope.getIndexById = function(id) {
var index = -1;
for (var i = 0; i < $scope.feedbackList.length; i++) {
if($scope.feedbackList[i].id == id) {
index = i
break;
}
}
return index
}
$scope.editItem = function(id) {
var index = $scope.getIndexById(id)
$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">
<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">
<abc></abc>
<abc></abc>
<abc></abc>
<a-b-c></a-b-c>
<div class="okok"></div>
<div uuu></div>
<eac></eac>
<div class="eac"></div>
<div eac></div>
<ul>
<li ng-repeat="item in stdList">{{item.fullname}}</li>
</ul>
</div>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.directive('abc', [function () {
return {
restrict: 'E',
template: `<h3>ABC ACB sdfksdhfksdfh</h3>`
};
}])
app.directive('aBC', [function () {
return {
restrict: 'E',
template: `<h3>~~~~~~~~~~~~</h3>`
};
}])
app.directive('okok', [function () {
return {
restrict: 'C',
template: `<h3>Xin chao</h3>`
};
}])
app.directive('uuu', [function () {
return {
restrict: 'A',
template: `<h3>Xin chao UUU</h3>`
};
}])
app.directive('eac', [function () {
return {
restrict: 'EAC',
template: `<h3>Xin chao UUsgfsdjgfdsjhfgU</h3>`
};
}])
app.controller('MyController', ['$scope', '$http', function ($scope, $http) {
$http.get("https://gokisoft.com/api/fake/49//c2206l/student/list")
.then(function(response) {
$scope.stdList = response.data
});
}])
</script>
</body>
</html>Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
