AngularJS 与 W3.CSS
您可以轻松地将 w3.css 样式表与 AngularJS 一起使用。 本章演示如何。
W3.CSS
要在您的 AngularJS 应用程序中包含 W3.CSS，请将以下行添加到文档的头部：
<link rel="stylesheet" href="https://www.w3ccoo.com/w3css/4/w3.css">
如果您想学习 W3.CSS，请访问我们的W3.CSS 教程。
下面是一个完整的 HTML 示例，解释了所有 AngularJS 指令和 W3.CSS 类。
HTML 代码
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://www.w3ccoo.com/w3css/4/w3.css">
<script src="https://cdn.staticfile.org/angular.js/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 | 如果错误或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 | 当用户点击"创建用户"时设置为真。 |
| $scope.hideform | 当用户点击"编辑"或"创建用户"时设置为 false。 |
| $scope.error | 如果 passw1 不等于 passw2 则设置为 true |
| $scope.incomplete | 如果任何字段为空（长度 = 0）则设置为 true |
| $scope.editUser | 设置模型变量 |
| $scope.$watch | 观察模型变量 |
| $scope.test | 测试模型变量的错误和不完整性 |
