参考手册
AngularJS API
AngularJS 包含

AngularJS 与 W3.CSS

你可以很容易地使用 w3.css 样式表和 AngularJS。本章将演示如何来使用。

W3.CSS

要在 AngularJS 应用程序包含 W3.CSS ，在文档的开头添加以下行:

  1. <link rel="stylesheet" href="https://cankaoshouce.com/css/w3.css">

如果您想学习 W3.CSS, 请访问本站的 W3.CSS 教程.

下面是一个完整的 HTML 示例，包含所有 AngularJS 指令和 W3.CSS 类:

HTML 代码

  1. <!DOCTYPE html>
  2. <html>
  3. <link rel="stylesheet" href="https://cankaoshouce.com/css/w3.css">
  4. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  5. <body ng-app="myApp" ng-controller="userCtrl">
  7. <div class="w3-container">
  9. <h3>用户</h3>
  11. <table class="w3-table w3-bordered w3-striped">
  12.   <tr>
  13.     <th>编辑</th>
  14.     <th>姓氏</th>
  15.     <th>名字</th>
  16.   </tr>
  17.   <tr ng-repeat="user in users">
  18.     <td>
  19.       <button class="w3-btn w3-ripple" ng-click="editUser(user.id)">&#9998; Edit</button>
  20.     </td>
  21.     <td>{{ user.fName }}</td>
  22.     <td>{{ user.lName }}</td>
  23.   </tr>
  24. </table>
  25. <br>
  26. <button class="w3-btn w3-green w3-ripple" ng-click="editUser('new')">&#9998; 创建新用户</button>
  28. <form ng-hide="hideform">
  29.   <h3 ng-show="edit">创建新用户:</h3>
  30.   <h3 ng-hide="edit">修改用户:</h3>
  31.     <label>姓氏:</label>
  32.     <input class="w3-input w3-border" type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name">
  33.   <br>
  34.     <label>名字:</label>
  35.     <input class="w3-input w3-border" type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">
  36.   <br>
  37.     <label>密码:</label>
  38.     <input class="w3-input w3-border" type="password" ng-model="passw1" placeholder="Password">
  39.   <br>
  40.     <label>Repeat:</label>
  41.     <input class="w3-input w3-border" type="password" ng-model="passw2" placeholder="Repeat Password">
  42.   <br>
  43.   <button class="w3-btn w3-green w3-ripple" ng-disabled="error || incomplete">&#10004; 保存修改</button>
  44. </form>
  46. </div>
  48. <script src= "/znadmin/md/3858/myUsers.js"></script>
  50. </body>
  51. </html>
运行一下

解释 (上面的) 指令

AngularJS 指令描述
<body ng-app定义 <body> 元素的应用程序
<body ng-controller定义一个 <body> 元素的控制器
<tr ng-repeat为用户中的每个用户重复 <tr> 元素
<button ng-click当 <button> 元素被点击，就调用 editUser() 函数
<h3 ng-show如果 edit = true，展示 <h3> 元素
<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

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
  1. angular.module('myApp', []).controller('userCtrl',  function($scope) {
  2. $scope.fName = '';
  3. $scope.lName = '';
  4. $scope.passw1 = '';
  5. $scope.passw2 = '';
  6. $scope.users = [
  7. {id:1, fName:'Hege', lName:"Pege" },
  8. {id:2, fName:'Kim', lName:"Pim" },
  9. {id:3, fName:'Sal', lName:"Smith" },
  10. {id:4, fName:'Jack', lName:"Jones" },
  11. {id:5, fName:'John', lName:"Doe" },
  12. {id:6, fName:'Peter',lName:"Pan" }
  13. ];
  14. $scope.edit = true;
  15. $scope.error = false;
  16. $scope.incomplete = false;
  17. $scope.hideform = true;
  18. $scope.editUser = function(id) {
  19.  $scope.hideform = false;
  20.  if (id == 'new') {
  21.   $scope.edit = true;
  22.   $scope.incomplete = true;
  23.   $scope.fName = '';
  24.   $scope.lName = '';
  25.   } else {
  26.   $scope.edit = false;
  27.   $scope.fName = $scope.users[id-1].fName;
  28.   $scope.lName = $scope.users[id-1].lName; 
  29.  }
  30. };
  32. $scope.$watch('passw1',function() {$scope.test();});
  33. $scope.$watch('passw2',function() {$scope.test();});
  34. $scope.$watch('fName', function() {$scope.test();});
  35. $scope.$watch('lName', function() {$scope.test();});
  37. $scope.test = function() {
  38.  if ($scope.passw1 !== $scope.passw2) {
  39.   $scope.error = true;
  40.   } else {
  41.   $scope.error = false;
  42.  }
  43.  $scope.incomplete = false;
  44.  if ($scope.edit &amp;&amp; (!$scope.fName.length ||
  45.  !$scope.lName.length ||
  46.  !$scope.passw1.length || !$scope.passw2.length)) {
  47.    $scope.incomplete = true;
  48.  }
  49. };
  51. });

JavaScript 代码解释

Scope 属性作用
$scope.fName模型变量（用户前名）
$scope.lName模型变量（用户后名）
$scope.passw1模型变量（用户密码 1）
$scope.passw2模型变量（用户密码 2）
$scope.users模型变量（用户数组）
$scope.edit当用户单击 'Create user' 时设置为 true。
$scope.hideform当用户单击 'Edit' 或 'Create user' 时，设置为 false
$scope.error如果 passw1 不等于 passw2，设置为 true
$scope.incomplete如果字段是空的 (length = 0)，设置为 true
$scope.editUser设置模型变量
$scope.watch观察模型变量
$scope.test测试模型变量的错误和不完整性
AngularJS API
AngularJS 包含

分类导航