Bạn có thể dễ dàng sử dụng bảng định kiểu w3.css cùng với AngularJS. Chương này trình bày cách thức.
W3.CSS
Để đưa W3.CSS vào ứng dụng AngularJS của bạn, hãy thêm dòng sau vào đầu tài liệu của bạn:<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
Nếu bạn muốn nghiên cứu W3.CSS, hãy truy cập Hướng dẫn về W3.CSS của chúng tôi .
Dưới đây là một ví dụ HTML hoàn chỉnh, với tất cả các chỉ thị AngularJS và các lớp W3.CSS được giải thích.
Mã HTML
<!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> Giải thích Chỉ thị (Đã sử dụng ở trên)
| AngularJS Directive | Description |
|---|---|
| <body ng-app | Defines an application for the <body> element |
| <body ng-controller | Defines a controller for the <body> element |
| <tr ng-repeat | Repeats the <tr> element for each user in users |
| <button ng-click | Invoke the function editUser() when the <button> element is clicked |
| <h3 ng-show | Show the <h3>s element if edit = true |
| <h3 ng-hide | Hide the form if hideform = true, and hide the <h3> element if edit = true |
| <input ng-model | Bind the <input> element to the application |
| <button ng-disabled | Disables the <button> element if error or incomplete = true |
Giải thích về các lớp W3.CSS
| Element | Class | Defines |
|---|---|---|
| <div> | w3-container | A content container |
| <table> | w3-table | A table |
| <table> | w3-bordered | A bordered table |
| <table> | w3-striped | A striped table |
| <button> | w3-btn | A button |
| <button> | w3-green | A green button |
| <button> | w3-ripple | A ripple effect when you click the button |
| <input> | w3-input | An input field |
| <input> | w3-border | A border on the input field |
Mã JavaScript
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; } }; }); Giải thích mã JavaScript
| Scope Properties | Used for |
|---|---|
| $scope.fName | Model variable (user first name) |
| $scope.lName | Model variable (user last name) |
| $scope.passw1 | Model variable (user password 1) |
| $scope.passw2 | Model variable (user password 2) |
| $scope.users | Model variable (array of users) |
| $scope.edit | Set to true when user clicks on ‘Create user’. |
| $scope.hideform | Set to false when user clicks on ‘Edit’ or ‘Create user’. |
| $scope.error | Set to true if passw1 not equal passw2 |
| $scope.incomplete | Set to true if any field is empty (length = 0) |
| $scope.editUser | Sets model variables |
| $scope.$watch | Watches model variables |
| $scope.test | Tests model variables for errors and incompleteness |