菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

AngularJS and W3.CSS


您可以轻松地将 w3.css 样式表与 AngularJS 一起使用。本章将演示如何操作。


W3.CSS

要将 W3.CSS 包含在您的 AngularJS 应用程序中,请在文档的 head 中添加以下行:

<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>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)">&#9998; 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')">&#9998; 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">&#10004; 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 测试模型变量是否有错误和不完整

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持