AngularJS and W3.CSS
您可以輕鬆地將 w3.css 樣式表與 AngularJS 一起使用。本章將演示如何操作。
W3.CSS
要將 W3.CSS 包含在您的 AngularJS 應用程式中，請在文件的 head 中新增以下行：
<link rel="stylesheet" href="https://w3schools.tw/w3css/4/w3.css">
如果您想學習 W3.CSS，請訪問我們的 W3.CSS 教程。
以下是一個完整的 HTML 示例，其中解釋了所有 AngularJS 指令和 W3.CSS 類。
HTML 程式碼
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://w3schools.tw/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>
自己動手試一試 »
指令 (上面使用) 解釋
| AngularJS 指令 | 描述 |
|---|---|
| <body ng-app | 為 <body> 元素定義應用程式 |
| <body ng-controller | 為 <body> 元素定義一個控制器 |
| <tr ng-repeat | 為 users 中的每個使用者重複 <tr> 元素 |
| <button ng-click | 當點選 <button> 元素時呼叫 editUser() 函式 |
| <h3 ng-show | 如果 edit = true，則顯示 <h3> 元素 |
| <h3 ng-hide | 如果 hideform = true，則隱藏表單；如果 edit = true，則隱藏 <h3> 元素 |
| <input ng-model | 將 <input> 元素繫結到應用程式 |
| <button ng-disabled | 如果 error 或 incomplete = true，則停用 <button> 元素 |
W3.CSS 類解釋
| 元素 | 類 | 定義 |
|---|---|---|
| <div> | w3-container | 內容容器 |
| <table> | w3-table | 表格 |
| <table> | w3-bordered | 帶邊框的表格 |
| <table> | w3-striped | 帶條紋的表格 |
| <button> | w3-btn | 一個按鈕 |
| <button> | w3-green | 綠色按鈕 |
| <button> | w3-ripple | 點選按鈕時有漣漪效果 |
| <input> | w3-input | 輸入欄位 |
| <input> | w3-border | 輸入欄位上的邊框 |
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;
}
};
});
JavaScript 程式碼解釋
| 作用域屬性 | 用於 |
|---|---|
| $scope.fName | 模型變數 (使用者名稱字) |
| $scope.lName | 模型變數 (使用者姓氏) |
| $scope.passw1 | 模型變數 (使用者密碼 1) |
| $scope.passw2 | 模型變數 (使用者密碼 2) |
| $scope.users | 模型變數 (使用者陣列) |
| $scope.edit | 當用戶點選“建立使用者”時設定為 true。 |
| $scope.hideform | 當用戶點選“編輯”或“建立使用者”時設定為 false。 |
| $scope.error | 如果 passw1 不等於 passw2，則設定為 true |
| $scope.incomplete | 如果任何欄位為空 (長度 = 0)，則設定為 true |
| $scope.editUser | 設定模型變數 |
| $scope.$watch | 監視模型變數 |
| $scope.test | 測試模型變數是否有錯誤和不完整 |
