AngularJS学习篇（十九）
AngularJS Bootstrap
可以在你的 AngularJS 应用中加入 Twitter Bootstrap，你可以在你的 <head>元素中添加如下代码:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
如果站点在国内，建议使用百度静态资源库的Bootstrap，代码如下：
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
以下是一个完整的 HTML 实例, 使用了 AngularJS 指令和 Bootstrap 类。
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<body ng-app="myApp" ng-controller="userCtrl"> <div class="container"> <h3>Users</h3> <table class="table table-striped">
<thead><tr>
<th>Edit</th>
<th>First Name</th>
<th>Last Name</th>
</tr></thead>
<tbody><tr ng-repeat="user in users">
<td>
<button class="btn" ng-click="editUser(user.id)">
<span class="glyphicon glyphicon-pencil"></span> Edit
</button>
</td>
<td>{{ user.fName }}</td>
<td>{{ user.lName }}</td>
</tr></tbody>
</table> <hr>
<button class="btn btn-success" ng-click="editUser('new')">
<span class="glyphicon glyphicon-user"></span> Create New User
</button>
<hr> <h3 ng-show="edit">Create New User:</h3>
<h3 ng-hide="edit">Edit User:</h3> <form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">First Name:</label>
<div class="col-sm-10">
<input type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Last Name:</label>
<div class="col-sm-10">
<input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Password:</label>
<div class="col-sm-10">
<input type="password" ng-model="passw1" placeholder="Password">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Repeat:</label>
<div class="col-sm-10">
<input type="password" ng-model="passw2" placeholder="Repeat Password">
</div>
</div>
</form> <hr>
<button class="btn btn-success" ng-disabled="error || incomplete">
<span class="glyphicon glyphicon-save"></span> Save Changes
</button>
</div> <script src = "myUsers.js"></script>
</body>
</html>
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.editUser = function(id) {
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;
}
};
});
指令解析
| AngularJS 指令 | 描述 |
|---|---|
| <html ng-app | 为 <html> 元素定义一个应用(未命名) |
| <body ng-controller | 为 <body> 元素定义一个控制器 |
| <tr ng-repeat | 循环 users 对象数组，每个 user 对象放在 <tr> 元素中。 |
| <button ng-click | 当点击 <button> 元素时调用函数 editUser() |
| <h3 ng-show | 如果 edit = true 显示 <h3> 元素 |
| <h3 ng-hide | 如果 edit = true 隐藏 <h3> 元素 |
| <input ng-model | 为应用程序绑定 <input> 元素 |
| <button ng-disabled | 如果发生错误或者 incomplete = true 禁用 <button> 元素 |
Bootstrap 类解析
| 元素 | Bootstrap 类 | 定义 |
|---|---|---|
| <div> | container | 内容容器 |
| <table> | table | 表格 |
| <table> | table-striped | 带条纹背景的表格 |
| <button> | btn | 按钮 |
| <button> | btn-success | 成功按钮 |
| <span> | glyphicon | 字形图标 |
| <span> | glyphicon-pencil | 铅笔图标 |
| <span> | glyphicon-user | 用户图标 |
| <span> | glyphicon-save | 保存图标 |
| <form> | form-horizontal | 水平表格 |
| <div> | form-group | 表单组 |
| <label> | control-label | 控制器标签 |
| <label> | col-sm-2 | 跨越 2 列 |
| <div> | col-sm-10 | 跨越 10 列 |
JavaScript 代码解析
| Scope 属性 | 用途 |
|---|---|
| $scope.fName | 模型变量 (用户名) |
| $scope.lName | 模型变量 (用户姓) |
| $scope.passw1 | 模型变量 (用户密码 1) |
| $scope.passw2 | 模型变量 (用户密码 2) |
| $scope.users | 模型变量 (用户的数组) |
| $scope.edit | 当用户点击创建用户时设置为true。 |
| $scope.error | 如果 passw1 不等于 passw2 设置为 true |
| $scope.incomplete | 如果每个字段都为空(length = 0)设置为 true |
| $scope.editUser | 设置模型变量 |
| $scope.watch | 监控模型变量 |
| $scope.test | 验证模型变量的错误和完整性 |
AngularJS学习篇（十九）的更多相关文章
- AngularJS学习篇（九）
AngularJS XMLHttpRequest $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据. $http.get('someUrl',config).then(s ...
- python3.4学习笔记(十九) 同一台机器同时安装 python2.7 和 python3.4的解决方法
python3.4学习笔记(十九) 同一台机器同时安装 python2.7 和 python3.4的解决方法 同一台机器同时安装 python2.7 和 python3.4不会冲突.安装在不同目录,然 ...
- 学习笔记：CentOS7学习之十九：Linux网络管理技术
目录 学习笔记:CentOS7学习之十九:Linux网络管理技术 本文用于记录学习体会.心得,兼做笔记使用,方便以后复习总结.内容基本完全参考学神教育教材,图片大多取材自学神教育资料,在此非常感谢MK ...
- 风炫安全web安全学习第二十九节课 CSRF防御措施
风炫安全web安全学习第二十九节课 CSRF防御措施 CSRF防御措施 增加token验证 对关键操作增加token验证,token值必须随机,每次都不一样 关于安全的会话管理(SESSION) 不要 ...
- 风炫安全WEB安全学习第十九节课 XSS的漏洞基础知识和原理讲解
风炫安全WEB安全学习第十九节课 XSS的漏洞基础知识和原理讲解 跨站脚本攻击(Cross-site scripting,通常简称为XSS) 反射型XSS原理与演示 交互的数据不会存储在数据库里,一次 ...
- Salesforce LWC学习(三十九) lwc下quick action的recordId的问题和解决方案
本篇参考: https://developer.salesforce.com/docs/component-library/bundle/force:hasRecordId/documentation ...
- (C/C++学习笔记) 十九. 模板
十九. 模板 ● 模板的基本概念 模板(template) 函数模板:可以用来创建一个通用功能的函数,以支持多种不同形参,进一步简化重载函数的函数体设计. 语法: template <<模 ...
- AngularJS学习篇（二十四）
AngularJS 应用 <html ng-app="myNoteApp"> <head> <meta charset="utf-8&quo ...
- AngularJS学习篇（二十二）
AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或 ...
随机推荐
- Redis介绍——Linux环境Redis安装全过程和遇到的问题及解决方案
一:redis的入门介绍: 首先贴出官网; 英文:https://redis.io/ 中文:http://www.redis.cn/ 1.是什么 --REmote DIctionary Server( ...
- Codeforces 845 C. Two TVs 思路：简单贪心算法
题目: 题目原文链接:http://codeforces.com/contest/845/problem/C 题意:现在我们有一个电视清单,有两个电视,电视清单上有每一个节目的开始时间和结束时间. 电 ...
- Beautiful Dream hdu3418 （直接做或二分）
Beautiful Dream Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)T ...
- Python 实现的随机森林
随机森林是一个高度灵活的机器学习方法,拥有广泛的应用前景,从市场营销到医疗保健保险. 既可以用来做市场营销模拟的建模,统计客户来源,保留和流失.也可用来预测疾病的风险和病患者的易感性. 随机森林是一个 ...
- C#实现断点续传
断点续传的原理在了解HTTP断点续传的原理之前,先来说说HTTP协议,HTTP协议是一种基于tcp的简单协议,分为请求和回复两种.请求协议是由客户机(浏览器)向服务器(WEB SERVER)提交请求时 ...
- HDU1403Longest Common Substring
明天写 超时代码: #include<cstdio> #include<cstdlib> #include<iostream> #include<cstrin ...
- mysql explain 分析sql语句
鉴于最近做的事情,需要解决慢sql的问题,现补充一点sql语句性能分析之explain的使用方式! 综合返回数据情况,分析各个参数,可以了解sql 使用方法:explain + sql语句 如 :e ...
- windows mysql 操作实践
1.通过navicat for mysql 进行数据库表的输入操作. 2.使用mySQL shell进行查询. 3. 显示数据表中的所有列的名称 show colums from user 4. 进 ...
- git的使用(入门篇)
1.Git 的安装 Window 下的安装 从 http://git-scm.com/download 上下载window版的客户端,然后一直下一步下一步安装git即可,请注意,如果你不熟悉每个选项的 ...
- Set 和 Map 数据结构
Set Set 对象允许你存储任何类型的 唯一值, 无论是 原始值(一共6种,string, number, boolean, undefined, null,和 es6 新增的 symbol) 还是 ...