By GokiSoft.com|
19:56 12/03/2022|
AngularJS
[Video] Tìm hiểu về Directive + Filter + Routing trong AngularJS - C2110L
#vidu.html
<!DOCTYPE html>
<html ng-app="MyApp" ng-init="title='Welcome to learn AngularJS';a=10;b=5;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lesson 02 Online</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<style type="text/css">
.form-group {
margin-bottom: 20px;
}
</style>
</head>
<body ng-controller="MyController">
<div class="container">
<h2 style="text-align: center;">{{ title }} - {{ a }} - {{ b }}</h2>
<button class="btn btn-warning" ng-click="toggleTable()">Toggle Table</button>
<label><input type="checkbox" ng-model="isShowTable"> Show Table</label>
<table class="table table-bordered" ng-show="isShowTable">
<thead>
<tr>
<th>No</th>
<th>Fullname</th>
<th>Email</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>TRAN VAN A</td>
<td>a@gmail.com</td>
<td>Ha Noi</td>
</tr>
<tr>
<td>2</td>
<td>TRAN VAN B</td>
<td>b@gmail.com</td>
<td>Ha Noi</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', ['$scope', function ($scope) {
// $scope.title = 'Welcome to learn AngularJS'
$scope.isShowTable = true
$scope.toggleTable = function() {
$scope.isShowTable = !$scope.isShowTable
}
}])
</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">
<title>Quan ly sinh vien - angularjs</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<style type="text/css">
.form-group {
margin-bottom: 20px;
}
</style>
</head>
<body ng-controller="MyController">
<div class="container">
<div class="card">
<div class="card-header bg-info">
NHAP THONG TIN SINH VIEN
</div>
<div class="card-body">
<form method="post" ng-submit="addStudent()">
<div class="form-group">
<label>Ho & Ten: </label>
<input required type="text" name="fullname" class="form-control" ng-model="fullname">
</div>
<div class="form-group">
<label>Email: </label>
<input required type="email" name="email" class="form-control" ng-model="email">
</div>
<div class="form-group">
<label>Dia Chi: </label>
<input required type="text" name="address" class="form-control" ng-model="address">
</div>
<div class="form-group">
<label>Luong: </label>
<input required type="number" name="salary" class="form-control" ng-model="salary">
</div>
<div class="form-group">
<button class="btn btn-success" type="submit">Luu Thong Tin</button>
<button class="btn btn-warning" ng-click="emptyForm()" type="button">Nhap Lai</button>
</div>
</form>
</div>
</div>
<div class="card" style="margin-top: 20px;">
<div class="card-header bg-info">
QUAN LY DANH SACH SINH VIEN
</div>
<div class="card-body">
<input type="text" name="s" placeholder="Enter searching ..." style="width: 200px; float: right; margin-bottom: 20px;" class="form-control" ng-model="s">
<table class="table table-bordered">
<thead>
<tr>
<th>STT</th>
<th>Ho & Ten</th>
<th>Email</th>
<th>Dia Chi</th>
<th>Luong</th>
<th style="width: 60px"></th>
<th style="width: 60px"></th>
</tr>
</thead>
<tbody>
<!-- Loc theo bat ky thuoc tin nao -->
<!-- <tr ng-repeat="item in studentList | filter:s track by $index"> -->
<!-- <tr ng-repeat="item in studentList | filter:s"> -->
<!-- Loc thong tin theo ten -->
<tr ng-repeat="item in studentList | filterName:s">
<td>{{ $index + 1 }}</td>
<td>{{ item.fullname | uppercase }}</td>
<td>{{ item.email }}</td>
<td>{{ item.address }}</td>
<td>{{ item.salary | currency:'':0 }}</td>
<td>
<button class="btn btn-warning" ng-click="editStudent($index)">Sua</button>
</td>
<td>
<button class="btn btn-danger" ng-click="removeStudent($index)">Xoa</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.filter('filterName', function() {
return function(studentList, s) {
if(s == null || s == '') return studentList
var list = []
for(item of studentList) {
// console.log(item.fullname + '-' + s)
if(item.fullname.toLowerCase().includes(s.toLowerCase())) {
list.push(item)
}
}
return list
}
})
app.controller('MyController', ['$scope', function ($scope) {
$scope.studentList = []
$scope.currentIndex = -1
$scope.addStudent = function() {
var std = {
'fullname': $scope.fullname,
'email': $scope.email,
'address': $scope.address,
'salary': $scope.salary
}
if($scope.currentIndex >= 0) {
$scope.studentList[$scope.currentIndex] = std
$scope.emptyForm()
} else {
$scope.studentList.push(std)
}
}
$scope.emptyForm = function() {
$scope.fullname = ''
$scope.email = ''
$scope.address = ''
$scope.salary = ''
$scope.currentIndex = -1
}
$scope.editStudent = function(index) {
$scope.currentIndex = index
$scope.fullname = $scope.studentList[index].fullname
$scope.email = $scope.studentList[index].email
$scope.address = $scope.studentList[index].address
$scope.salary = $scope.studentList[index].salary
}
$scope.removeStudent = function(index) {
var option = confirm('Ban co chac chan muon xoa sinh vien nay khong?')
if(!option) return
$scope.studentList.splice(index, 1)
}
}])
</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)
