AngularJS tut 20: AngularJS và W3.CSS

0
(0)

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)">&#9998; 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')">&#9998; 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">&#10004; Save Changes</button>
</form>

</div>

<script src= "myUsers.js"></script>

</body>
</html>

Hãy tự mình thử »



Giải thích Chỉ thị (Đã sử dụng ở trên)

AngularJS DirectiveDescription
<body ng-appDefines an application for the <body> element
<body ng-controllerDefines a controller for the <body> element
<tr ng-repeatRepeats the <tr> element for each user in users
<button ng-clickInvoke the function editUser() when the <button> element is clicked
<h3 ng-showShow the <h3>s element if edit = true
<h3 ng-hideHide the form if hideform = true, and hide the <h3> element if edit = true
<input ng-modelBind the <input> element to the application
<button ng-disabledDisables the <button> element if error or incomplete = true

Giải thích về các lớp W3.CSS

ElementClassDefines
<div>w3-containerA content container
<table>w3-tableA table
<table>w3-borderedA bordered table
<table>w3-stripedA striped table
<button>w3-btnA button
<button>w3-greenA green button
<button>w3-rippleA ripple effect when you click the button
<input>w3-inputAn input field
<input>w3-borderA 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 PropertiesUsed for
$scope.fNameModel variable (user first name)
$scope.lNameModel variable (user last name)
$scope.passw1Model variable (user password 1)
$scope.passw2Model variable (user password 2)
$scope.usersModel variable (array of users)
$scope.editSet to true when user clicks on ‘Create user’.
$scope.hideformSet to false when user clicks on ‘Edit’ or ‘Create user’.
$scope.errorSet to true if passw1 not equal passw2
$scope.incompleteSet to true if any field is empty (length = 0)
$scope.editUserSets model variables
$scope.$watchWatches model variables
$scope.testTests model variables for errors and incompleteness

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

Related posts

AngularJS tut 25: Tham khảo thêm về AngularJS

AngularJS tut 24: Làm thử 1 ứng dụng AngularJS

AngularJS tut 23 : AngularJS Routing