AngularJS -- 代码实例
整理书籍内容（QQ:283125476 发布者：M 【重在分享，有建议请联系-》QQ号】）
ng-change 当文本输入字段中内容发生了变化，就会改变equation.x的值：
<body ng-app="myApp">
<div ng-controller="TestController">
<input type="text"
ng-model="equation.x"
ng-change="change()" />
<code>{{ equation.output }}</code>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("TestController", function($scope) {
$scope.equation = {};
$scope.change = function() {
$scope.equation.output = parseInt($scope.equation.x) + 2;
};
});
</script>
</body>
- 表单合法时设置 ng-valid;
- 表单不合法时设置 ng-invlid;
- 表单未进行修改时设置 ng-pristion;
- 表单进行过修改时设置 ng-dirty;
ng-cloak效果跟ng-bind差不多，就是为了防止闪烁
<body ng-app="myApp">
<div ng-controller="TestController">
<p ng-cloak>sss{{ aaa }}</p>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("TestController", function($scope, $timeout) {
//dosomething;
$timeout(function() {
$scope.aaa = "lll";
}, 1000);
});
</script>
</body>
ng-click
<body ng-app="myApp">
<div ng-controller="TestController">
<button ng-click="count = count +1"
ng-init="count = 9">increment</button>
count: {{ count }};
<button ng-click="decrement()">decrement</button>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("TestController", function($scope) {
//dosomething;
$scope.decrement = function() {
$scope.count = $scope.count - 1;
};
});
</script>
</body>
ng-select
<body ng-app="myApp">
<div ng-controller="TestController">
<ul>
<li ng-repeat="color in colors">
Name: <input ng-model="color.name">
[<a href ng-click="colors.splice($index, 1)">X</a>]
</li>
<li>
[<a href ng-click="colors.push({})">add</a>]
</li>
</ul>
<hr/>
Color (null not allowed):
<select ng-model="myColor" ng-options="color.name for color in colors"></select><br>
Color (null allowed):
<span class="nullable">
<select ng-model="myColor" ng-options="color.name for color in colors">
<option value="">-- choose color --</option>
</select>
</span><br/>
Color grouped by shade:
<select ng-model="myColor" ng-options="color.name group by color.shade for color in colors">
</select><br/>
Select <a href ng-click="myColor = { name:'not in list', shade: 'other' }">bogus</a>.<br>
<hr/>
Currently selected: {{ {selected_color:myColor} }}
<div style="border:solid 1px black; height:20px"
ng-style="{'background-color':myColor.name}">
</div>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("TestController", function($scope) {
$scope.colors = [
{name:'black', shade:'dark'},
{name:'white', shade:'light'},
{name:'red', shade:'dark'},
{name:'blue', shade:'dark'},
{name:'yellow', shade:'light'}
];
$scope.myColor = $scope.colors[2];
});
</script>
</body>
ng-attr-(suffix)
当AngularJS编译DOM时会查找花括号{{ some expression }}内的表达式。这些表达式会被自动注册到$watch服务中
并更新到$disgest循环中，成为它的一部分：
有时候浏览器会对属性进行很苛刻的限制。SVG就是一个例子：
<svg>
<circle cx="{{ cs }}"></sircle>
</svg>
运行上面的代码会抛出一个错误，指出我们有一个非法属性，可以用ng-attr-cs来解决这个问题，
注意，cx位于这个名称的尾部，在这个属性中，通过用来{{ }}写表达式，达到前面提到的目的：
<svg>
<circle ng-attr-cx="{{ cx }}"></circle>
</svg>
AngularJS -- 代码实例的更多相关文章
- MATLAB的PLOT函数线型设置及横坐标为字符串的代码实例
2.横坐标为字符串的代码实例 cell={‘PLS’,’SVM’,’RF’,’NNET’,’NB’,’PLR’,’C5.0′,’PDA’,’KNN’,’GLM’,’BCT’};%分类方法yData=[ ...
- web service上传参数代码实例
web service上传参数代码实例 这次做的项目用到webservice比较多,最开始在网上看的参考dome,发现都不行,后来发现安卓4.0以后有很大的不同,在做传参时,有些东西需要注意: 第一, ...
- (转)combogrid的代码实例
EasyUI中combogrid的代码实例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- PHP生成迅雷、快车、旋风等软件的下载链接代码实例
PHP生成迅雷.快车.旋风等软件的下载链接代码实例 <?php function Download() { $urlodd=explode('//',$_POST["url" ...
- Scala 深入浅出实战经典 第45讲： scala中context bounds代码实例
王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-64讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...
- 关于JAVA中事件分发和监听机制实现的代码实例-绝对原创实用
http://blog.csdn.net/5iasp/article/details/37054171 文章标题:关于JAVA中事件分发和监听机制实现的代码实例 文章地址: http://blog.c ...
- input文本框实现宽度自适应代码实例
代码实例如下: <!DOCTYPE html> <html><head><meta charset="utf-8"><meta ...
- jQuery实现的鼠标滑过切换图片代码实例
jQuery实现的鼠标滑过切换图片代码实例:有时候网页需要这样的简单效果,那就是当鼠标滑过默认图片的时候,能够实现图片的切换,可能在实际应用中,往往没有这么简单,不过大家可以自行扩展一下,下面简单介绍 ...
- input文本框实现宽度自适应代码实例，input文本框
本章节介绍一下如何让一个文本框的宽度能够随着文本框中的内容的宽度增长而增长,也就是能够实现宽度自适应效果. 代码实例如下: <!DOCTYPE html> <html> < ...
随机推荐
- Kubernetes学习-基础架构
kubectl是一个Kubernetes提供的客户端工具,是用于操作kubernetes集群的命令行接口,通过利用kubectl的各种命令可以实现各种功能,是在使用kubernetes中非常常用的工具 ...
- python 游戏(龙的国度)
1. 理清楚游戏思路 实现功能:2个洞穴选择,一个洞穴是好龙,一个洞穴是坏龙,坏龙可以概率屠龙或者概率逃跑选项(后续难度需要增加宝藏获取装备,随机遇见商人,随着游戏进度逐步减少屠龙概率) 2. 计数和 ...
- 1085. Perfect Sequence (25)-水题
#include <iostream> #include <cstdio> #include <algorithm> #include <string.h&g ...
- TeamWork#3,Week5,Release Notes of the Alpha Version
在这里的是一款你时下最不可或缺的一款美妙的产品. “今天哪家外卖便宜?” “今天这家店在哪个网站打折?” “这家店到底哪个菜好吃?” 这些问题你在寝室/办公室每天要问几次?还在为了找一家便宜的外卖店而 ...
- 11.12 Daily Scrum(保存草稿后忘了发布·····）
在实现过程中,我们发现要将不同人开发的组件整合起来并不是一件容易的事,于是我们调整了一下任务,修改了一下各自的程序: Today's tasks Tomorrow's tasks 丁辛 餐厅列表 ...
- (Alpha)Let's-技术文档（技术规格说明书）
技术规格说明书 抽象 首先,对抽象原则的理解,“抽象”这一概念本身就很抽象.抽象体现的是一种概括能力.我们生活中遇到的很多客体,其在某些方面具备有一些相似甚至相同的性质,以这些特点而非事物本身来认识鉴 ...
- Alpha 答辩总结
前言 作业发布 组长 成员 贡献比例 ★ 530 雨勤 23% 311 旭 23% 403 俊 18% 223 元 23% 437 海辉 13% 10天 Alpha 冲刺站立会议博客链接汇总 Alph ...
- windows 服务实现定时任务调度（Quartz.Net）
我们通常在一些情况下需要软件具有一个自动执行某些任务的功能,但是又不希望直接启动软件,或者每次都要手动的来启动软件,这时我们可可以考虑到windows服务了. 首先创建一个windows服务项目(详细 ...
- 如何用Delphi开发网游外挂
1.动作式,所谓动作式,就是指用API发命令给窗口或API控制鼠标.键盘等,使游戏里的人物进行流动或者攻击,最早以前的“石器”外挂就是这种方式.2.本地修改式,这种外挂跟传统上的一些游戏修改器没有两样 ...
- 浅谈Java中的深克隆和浅克隆（阿里面试）
在最近的秋招中,阿里和多益网络都问到了这个问题,虽然很简单,但是我还是想总结一下,感兴趣的可以看一下我的个人博客网站(Spring+MyBatis+redis+nginx+mysql)(适合菜鸟),最 ...