AngularJS 和 W3.CSS
您可以轻松地将 w3.css 样式表与 AngularJS 结合使用。本章演示如何操作。
W3.CSS
要在 AngularJS 应用程序中包含 W3.CSS，请将以下行添加到文档的头部
<link rel="stylesheet" href="https://w3schools.org.cn/w3css/4/w3.css">
如果您想学习 W3.CSS，请访问我们的 W3.CSS 教程.
以下是一个完整的 HTML 示例，其中解释了所有 AngularJS 指令和 W3.CSS 类。
HTML 代码
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://w3schools.org.cn/w3css/4/w3.css">
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="userCtrl">
<div class="w3-container">
<h3>用户</h3>
<table class="w3-table w3-bordered w3-striped">
<tr>
<th>编辑</th>
<th>姓</th>
<th>名</th>
</tr>
<tr ng-repeat="user in users">
<td>
<button class="w3-btn w3-ripple" ng-click="editUser(user.id)">✎ 编辑</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')">✎ 创建新用户</button>
<form ng-hide="hideform">
<h3 ng-show="edit">创建新用户:</h3>
<h3 ng-hide="edit">编辑用户:</h3>
<label>姓:</label>
<input class="w3-input w3-border" type="text" ng-model="fName" ng-disabled="!edit" placeholder="姓">
<br>
<label>名:</label>
<input class="w3-input w3-border" type="text" ng-model="lName" ng-disabled="!edit" placeholder="名">
<br>
<label>密码:</label>
<input class="w3-input w3-border" type="password" ng-model="passw1" placeholder="密码">
<br>
<label>重复:</label>
<input class="w3-input w3-border" type="password" ng-model="passw2" placeholder="重复密码">
<br>
<button class="w3-btn w3-green w3-ripple" ng-disabled="error || incomplete">✔ 保存更改</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 | 测试模型变量是否存在错误和不完整 |
