AngularJS W3.CSS
w3.css uslublar jadvalini AngularJS bilan birga osongina ishlatishingiz mumkin. Ushbu bobda buni qanday qilish ko‘rsatiladi.
W3.CSS
AngularJS ilovangizga W3.CSS’ni qo‘shish uchun hujjatingizning head qismiga quyidagi qatorni qo‘shing:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
Agar W3.CSS’ni o‘rganmoqchi bo‘lsangiz, W3.CSS darsligimizga tashrif buyuring.
Quyida barcha AngularJS direktivalari va W3.CSS klasslari izohlangan to‘liq HTML misoli keltirilgan.
HTML kodi
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="userCtrl">
<div class="w3-container">
<h3>Users</h3>
<table class="w3-table w3-bordered w3-striped">
<tr>
<th>Edit</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr ng-repeat="user in users">
<td>
<button class="w3-btn w3-ripple" ng-click="editUser(user.id)">✎ Edit</button>
</td>
<td>{{ user.fName }}</td>
<td>{{ user.lName }}</td>
</tr>
</table>
<br>
<button class="w3-btn w3-green w3-ripple" ng-click="editUser('new')">✎ Create New User</button>
<form ng-hide="hideform">
<h3 ng-show="edit">Create New User:</h3>
<h3 ng-hide="edit">Edit User:</h3>
<label>First Name:</label>
<input class="w3-input w3-border" type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name">
<br>
<label>Last Name:</label>
<input class="w3-input w3-border" type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">
<br>
<label>Password:</label>
<input class="w3-input w3-border" type="password" ng-model="passw1" placeholder="Password">
<br>
<label>Repeat:</label>
<input class="w3-input w3-border" type="password" ng-model="passw2" placeholder="Repeat Password">
<br>
<button class="w3-btn w3-green w3-ripple" ng-disabled="error || incomplete">✔ Save Changes</button>
</form>
</div>
<script src= "myUsers.js"></script>
</body>
</html>
O‘zingiz sinab ko‘ring »
Direktivalar (yuqorida ishlatilgan) izohi
| AngularJS direktivasi | Tavsif |
|---|---|
| <body ng-app | <body> elementi uchun ilovani belgilaydi |
| <body ng-controller | <body> elementi uchun kontrollerni belgilaydi |
| <tr ng-repeat | users ichidagi har bir user uchun <tr> elementini takrorlaydi |
| <button ng-click | <button> elementi bosilganda editUser() funksiyasini chaqiradi |
| <h3 ng-show | edit = true bo‘lsa, <h3> elementini ko‘rsatadi |
| <h3 ng-hide | hideform = true bo‘lsa, formani yashiradi, edit = true bo‘lsa, <h3> elementini yashiradi |
| <input ng-model | <input> elementini ilovaga bog‘laydi |
| <button ng-disabled | error yoki incomplete = true bo‘lsa, <button> elementini o‘chirib qo‘yadi (disabled) |
W3.CSS klasslari izohi
| Element | Klass | Vazifasi |
|---|---|---|
| <div> | w3-container | Kontent konteyneri |
| <table> | w3-table | Jadval |
| <table> | w3-bordered | Chegarali jadval |
| <table> | w3-striped | Yo‘l-yo‘l (striped) jadval |
| <button> | w3-btn | Tugma |
| <button> | w3-green | Yashil tugma |
| <button> | w3-ripple | Tugmani bosganingizda to‘lqin (ripple) effekti |
| <input> | w3-input | Kiritish maydoni |
| <input> | w3-border | Kiritish maydoni atrofidagi chegara |
JavaScript kodi
myUsers.js
angular.module('myApp', []).controller('userCtrl', function($scope) {
$scope.fName = '';
$scope.lName = '';
$scope.passw1 = '';
$scope.passw2 = '';
$scope.users = [
{id:1, fName:'Hege', lName:"Pege" },
{id:2, fName:'Kim', lName:"Pim" },
{id:3, fName:'Sal', lName:"Smith" },
{id:4, fName:'Jack', lName:"Jones" },
{id:5, fName:'John', lName:"Doe" },
{id:6, fName:'Peter',lName:"Pan" }
];
$scope.edit = true;
$scope.error = false;
$scope.incomplete = false;
$scope.hideform = true;
$scope.editUser = function(id) {
$scope.hideform = false;
if (id == 'new') {
$scope.edit = true;
$scope.incomplete = true;
$scope.fName = '';
$scope.lName = '';
} else {
$scope.edit = false;
$scope.fName = $scope.users[id-1].fName;
$scope.lName = $scope.users[id-1].lName;
}
};
$scope.$watch('passw1',function() {$scope.test();});
$scope.$watch('passw2',function() {$scope.test();});
$scope.$watch('fName', function() {$scope.test();});
$scope.$watch('lName', function() {$scope.test();});
$scope.test = function() {
if ($scope.passw1 !== $scope.passw2) {
$scope.error = true;
} else {
$scope.error = false;
}
$scope.incomplete = false;
if ($scope.edit && (!$scope.fName.length ||
!$scope.lName.length ||
!$scope.passw1.length || !$scope.passw2.length)) {
$scope.incomplete = true;
}
};
});
JavaScript kodi izohi
| Scope xususiyatlari | Qo‘llanilishi |
|---|---|
| $scope.fName | Model o‘zgaruvchisi (foydalanuvchi ismi) |
| $scope.lName | Model o‘zgaruvchisi (foydalanuvchi familiyasi) |
| $scope.passw1 | Model o‘zgaruvchisi (foydalanuvchi paroli 1) |
| $scope.passw2 | Model o‘zgaruvchisi (foydalanuvchi paroli 2) |
| $scope.users | Model o‘zgaruvchisi (foydalanuvchilar massivi) |
| $scope.edit | Foydalanuvchi "Create user" tugmasini bosganda true qiymatiga o‘rnatiladi. |
| $scope.hideform | Foydalanuvchi "Edit" yoki "Create user" tugmasini bosganda false qiymatiga o‘rnatiladi. |
| $scope.error | passw1 passw2 ga teng bo‘lmasa, true qiymatiga o‘rnatiladi |
| $scope.incomplete | Biror maydon bo‘sh bo‘lsa (length = 0), true qiymatiga o‘rnatiladi |
| $scope.editUser | Model o‘zgaruvchilarini o‘rnatadi |
| $scope.$watch | Model o‘zgaruvchilarini kuzatadi |
| $scope.test | Model o‘zgaruvchilarini xatolar va to‘liq emasligi bo‘yicha tekshiradi |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!