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)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或 ...
随机推荐
- PyTorch教程之Tensors
Tensors类似于numpy的ndarrays,但是可以在GPU上使用来加速计算. 一.Tensors的构建 from __future__ import print_function import ...
- 反射结合xml简单的模拟spring创建bean
框架最底层其实就是通过反射实现的,就像spring,当你配置各种各样的bean时都是以配置文件的形式配置的,你需要用到哪些bean就配哪些,spring容器就会根据你的需求去动态加载,这儿写一个简单的 ...
- 当你的SSM项目中的springmvc.xml发生第一行错误解决方案
当你新建了一个SSM项目,你复制网上的xml文件来配置或者你下载了一个SSM项目打开发现xml文件错误,打开是第一行报错的时候你是不是很懵逼 或者是这样 总之就是xml文件中<?xml vers ...
- JS设计模式（二） 惰性模式
惰性模式:减少代码每次执行时的重复性判断,通过重新定义对象来避免原对象中的分支判断,提高网站性能. 例如针对不同浏览器的事件注册方法: var AddEvent = function(dom, typ ...
- Glide 这样用，更省内存！！！
一.前言 Glide 是 Google 官方推荐的一款图片加载库,使用起来也非常的简单便利,Glide 它帮我们完成了很多很重要,但是却通用的功能,例如:图片的加载压缩.展示.加载图片的内存管理等等. ...
- 修改host可以上的一些网站
打开路径 C:\Windows\System32\drivers\etc 博客园 223.6.248.220 www.cnblogs.com github 192.30.253.112 github. ...
- 用mp3stego来加密与解密文件的几次尝试
用法来自实验吧的"Canon"隐写题目的灵感. 先来简单的聊一下这道题目,打开题目后发现了一个mp3文件,除此之外还有一枚压缩包.然而压缩包是加密的,看来我们需要通过解出来mp3里 ...
- 基于java生成二维码
二维码 二维码的概念 ...
- VB.net shell、IO.File.Open、Process.Start、Shellexecute API 运用经验总结
打开文件还有很多方法,但我了解到运用较多的是上面几种- -,为了防止以后忘记,先把了解到的写下来. 1.Shell 这个看了很多网页,最靠谱的运用方法: Shell("cmd.exe /c ...
- python contextlib 上下文管理器
1.with操作符 在python中读写文件,可能需要这样的代码 try-finally读写文件 file_text = None try: file_text = open('./text', 'r ...