您可以輕鬆地AngularJS一起使用w3.css樣式表。 本章將介紹如何。
W3.CSS
要包含W3.CSS在AngularJS應用，下面一行添加到您的文檔的頭部：
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
如果你想學習W3.CSS，請訪問我們的W3.CSS教程 。
下面是一個完整的HTML的例子，所有的AngularJS指令和W3.CSS上課。
HTML代碼
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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 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 |
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 |
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 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 true 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 |