By GokiSoft.com|
19:51 10/03/2022|
AngularJS
[Video] Tim hieu AngularJS - ng-repeat trong AngularJS - C2110L
#vidu.html
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJS Tutorial</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="form-group">
<label>Fullname: </label>
<input type="text" name="fullname" class="form-control" ng-model="fullname">
<p>{{ fullname }}</p>
<!-- js -->
<!-- Bat event: onkeyup -> tag:fullname -> function -> lay noi dung input:fullname -> chen noi dung vao the p (dat ten moi chen dc) -->
</div>
<div class="form-group">
<label>Email: </label>
<input type="email" name="email" class="form-control" ng-model="email">
</div>
<div class="form-group">
<label>Phone Number: </label>
<input type="tel" name="phone_number" class="form-control" ng-model="phone_number">
</div>
<div class="form-group">
<label>Address: </label>
<input type="text" name="address" class="form-control" ng-model="address">
</div>
<div class="form-group">
<button class="btn btn-success" ng-click="addStudent()">Save</button>
<button class="btn btn-warning">Reset</button>
</div>
<!-- Expression -->
{{ 2 + 3 }}
{{ 'Sinh Vien Aptech 54 Le Thanh Nghi' }}
<h1>{{ content }}</h1>
<!-- <h2>{{ abc }}</h2> -->
<div class="form-group">
<label>X: </label>
<input type="number" name="x" class="form-control" ng-model="x">
</div>
<div class="form-group">
<label>Y: </label>
<input type="number" name="y" class="form-control" ng-model="y">
</div>
<p>
<strong>Tong:</strong> {{ x + y }}, <strong>Hieu:</strong> {{ x - y }}, <strong>Thuong:</strong> {{ x/y }}, <strong>Tich:</strong> {{ x*y }}
</p>
<p>
<button class="btn btn-success" ng-click="tinhtong()">+</button>
<button class="btn btn-info" ng-click="tinhhieu()">-</button>
<button class="btn btn-warning" ng-click="tinhthuong()">/</button>
<button class="btn btn-danger" ng-click="tinhtich()">*</button>
</p>
<p>Ket qua: {{ result }}</p>
<h2>THONG TIN SINH VIEN</h2>
<ul>
<li>Ho ten: {{ student.fullname }}</li>
<li>Dia chi: {{ student.address }}</li>
<li>Tuoi: {{ student.age }}</li>
<li>Email: {{ student.email }}</li>
</ul>
<h2>DANH SACH MON HOC</h2>
<ul>
<li>{{ languages[0] }}</li>
<li>{{ languages[1] }}</li>
</ul>
<h2>DANH SACH MON HOC: FOR</h2>
<ul>
<li ng-repeat="subject in languages">{{ subject }}</li>
</ul>
<ul>
<li ng-repeat="subject in languages track by $index">{{ subject }}</li>
</ul>
<h2>DANH SACH SINH VIEN</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Fullname</th>
<th>Address</th>
<th>Age</th>
<th>Email</th>
<th style="width: 60px"></th>
<th style="width: 60px"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in studentList track by $index">
<td>{{ $index + 1 }} | {{ studentList.length - $index }}</td>
<td>{{ item.fullname }}</td>
<td>{{ item.address }}</td>
<td>{{ item.age }}</td>
<td>{{ item.email }}</td>
<td>
<button class="btn btn-warning">Edit</button>
</td>
<td>
<button class="btn btn-danger" ng-click="removeStudent($index)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', ['$scope', function ($scope) {
//Noi code login -> model trong angularjs
$scope.content = 'Sinh vien aptech 54 Le Thanh Nghi'
// var abc = 'OKOK'
$scope.student = {
'fullname': 'TRAN VAN A',
'address': 'Ha Noi',
'age': 22,
'email': 'abc@gmail.com'
}
$scope.languages = ['Lap Trinh C', 'HTML/CSS/JS', 'AngularJS', 'SQL Server', 'PHP/Laravel']
$scope.studentList = [
{
'fullname': 'TRAN VAN A',
'address': 'Ha Noi',
'age': 22,
'email': 'abc@gmail.com'
}, {
'fullname': 'TRAN VAN B',
'address': 'Ha Noi',
'age': 23,
'email': '324@gmail.com'
}, {
'fullname': 'TRAN VAN C',
'address': 'Ha Noi',
'age': 44,
'email': '35443@gmail.com'
}
]
$scope.addStudent = function() {
std = {
'fullname': $scope.fullname,
'age': $scope.age,
'address': $scope.address,
'email': $scope.email
}
$scope.studentList.push(std)
}
$scope.removeStudent = function(index) {
$scope.studentList.splice(index, 1)
}
$scope.tinhtong = function() {
$scope.result = $scope.x + $scope.y
}
$scope.tinhhieu = function() {
$scope.result = $scope.x - $scope.y
}
$scope.tinhthuong = function() {
$scope.result = $scope.x / $scope.y
}
$scope.tinhtich = function() {
$scope.result = $scope.x * $scope.y
}
}])
</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)
