【js类库AngularJs】学习angularJs的指令(包括常见表单验证,隐藏等功能)
【js类库AngularJs】学习angularJs的指令(包括常见表单验证,隐藏等功能)
AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的 是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入、等等。
参考资料:
angularjs中文网:http://www.apjs.net/
angularjs官网:http://angularjs.org
api参考:http://docs.angularjs.cn/api/ng/directive/form
(之所以列出如上这些链接,是因为本人在学习各类语言的过程中,发现入门以后,通过看官方文档,反倒会学习的更快,更准确,更系统。)
从jquery转向angularJs这种双向绑定的js框架时,最让人担忧的是原来处理dom的方式在使用angularJs后,应该怎么适应呢?
本文列出了比较常见的几种处理,包括表单验证,动态设置元素样式,设置元素显示隐藏等功能。
1. input[checkbox]双选框
使用方法:
<input type="checkbox"
ng-model=""
[name=""]
[ng-true-value=""]
[ng-false-value=""]
[ng-change=""]>
使用实例:
<form name="myForm" ng-controller="ExampleController">
Value1: <input type="checkbox" ng-model="value1"> <br/>
Value2: <input type="checkbox" ng-model="value2"
ng-true-value="'YES'" ng-false-value="'NO'"> <br/>
<tt>value1 = {{value1}}</tt><br/>
<tt>value2 = {{value2}}</tt><br/>
</form>
js代码:
var app = angular.module('formExample', []);
app.controller('ExampleController', ['$scope', function($scope) {
console.log('...');
$scope.value1 = true;
$scope.value2 = 'YES'
}]);
页面效果图:
2.input[date]时间选择器
使用方法:
<input type="date"
ng-model=""
[name=""]
[min=""]
[max=""]
[required=""]
[ng-required=""]
[ng-change=""]>
使用实例:
<form name="dateForm" ng-controller="DateController">
Pick a date in 2015:
<input type="date" id="exampleInput" name="input" ng-model="value"
placeholder="yyyy-MM-dd" min="2015-01-01" max="2015-12-31" required />
<span class="error" ng-show="dateForm.input.$error.required">
Required!</span>
<span class="error" ng-show="dateForm.input.$error.date">
Not a valid date!</span>
<tt>value = {{value}}</tt><br/>
<tt>value = {{value | date: "yyyy-MM-dd"}}</tt><br/>
<tt>dateForm.input.$valid = {{dateForm.input.$valid}}</tt><br/>
<tt>dateForm.input.$error = {{dateForm.input.$error}}</tt><br/>
<tt>dateForm.$valid = {{dateForm.$valid}}</tt><br/>
<tt>dateForm.$error.required = {{!!dateForm.$error.required}}</tt><br/>
</form>
js代码:
function DateController($scope){
$scope.value = new Date(2015, 9, 22);
}
效果图:
3.ng-class 使用angularJs动态设置、更改dom元素的css样式。
css样式:
.strike {
text-decoration: line-through;
}
.bold {
font-weight: bold;
}
.red {
color: red;
}
html代码:
<p ng-class="{strike: deleted, bold: important, red: error}">Map Syntax Example</p>
<input type="checkbox" ng-model="deleted"> deleted (apply "strike" class)<br>
<input type="checkbox" ng-model="important"> important (apply "bold" class)<br>
<input type="checkbox" ng-model="error"> error (apply "red" class)
<hr>
<p ng-class="style">Using String Syntax</p>
<input type="text" ng-model="style" placeholder="Type: bold strike red">
<hr>
<p ng-class="[style1, style2, style3]">Using Array Syntax</p>
<input ng-model="style1" placeholder="Type: bold, strike or red"><br>
<input ng-model="style2" placeholder="Type: bold, strike or red"><br>
<input ng-model="style3" placeholder="Type: bold, strike or red"><br>
效果图:
4.ng-class-odd/even 分别定义奇数偶数元素的css样式
css样式:
.odd {
color: red;
}
.even {
color: blue;
}
html代码:
<ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']">
<li ng-repeat="name in names">
<span ng-class-odd="'odd'" ng-class-even="'even'">
{{name}}
</span>
</li>
</ol>
效果图:
5.ng-click 单击事件
<button ng-click="count = count + 1" ng-init="count=0">
Increment
</button>
<span>
count: {{count}}
</span>
6.ng-show/hide 是否显示,或隐藏。angularJs根据这两个属性的值,对相应元素增加.ng-hide的样式
css样式:
.ng-hide {
line-height:;
opacity:;
padding: 0 10px;
}
html代码:
<span>Click me: </span><input type="checkbox" ng-model="checked"><br/>
<div>
Show:
<div style="background-color:#ccc" ng-show="checked">
<span> I show up when your checkbox is checked.</span>
</div>
</div>
<div>
Hide:
<div style="background-color:#258be3;color:white" ng-hide="checked">
<span> I hide when your checkbox is checked.</span>
</div>
</div>
最后,全部代码如下,单页test.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>angularJs directive(指令)</title>
<style>
body{font:12px/1.5 tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif}
.strike {
text-decoration: line-through;
}
.bold {
font-weight: bold;
}
.red {
color: red;
}
.odd {
color: red;
}
.even {
color: blue;
}
.ng-hide {
line-height: 0;
opacity: 0;
padding: 0 10px;
}
</style>
<script src="//cdn.bootcss.com/angular.js/1.2.19/angular.js"></script>
</head>
<body ng-app="formExample"> <h2>AngularJS Sample Application</h2>
<div>
<h3>input[checkbox]</h3>
<form name="myForm" ng-controller="ExampleController">
Value1: <input type="checkbox" ng-model="value1"> <br/>
Value2: <input type="checkbox" ng-model="value2"
ng-true-value="'YES'" ng-false-value="'NO'"> <br/>
<tt>value1 = {{value1}}</tt><br/>
<tt>value2 = {{value2}}</tt><br/>
</form>
</div> <div>
<hr>
<h3>input[date]</h3>
<form name="dateForm" ng-controller="DateController">
Pick a date in 2015:
<input type="date" id="exampleInput" name="input" ng-model="value"
placeholder="yyyy-MM-dd" min="2015-01-01" max="2015-12-31" required />
<span class="error" ng-show="dateForm.input.$error.required">
Required!</span>
<span class="error" ng-show="dateForm.input.$error.date">
Not a valid date!</span>
<tt>value = {{value}}</tt><br/>
<tt>value = {{value | date: "yyyy-MM-dd"}}</tt><br/>
<tt>dateForm.input.$valid = {{dateForm.input.$valid}}</tt><br/>
<tt>dateForm.input.$error = {{dateForm.input.$error}}</tt><br/>
<tt>dateForm.$valid = {{dateForm.$valid}}</tt><br/>
<tt>dateForm.$error.required = {{!!dateForm.$error.required}}</tt><br/>
</form>
</div>
<script>
var app = angular.module('formExample', []);
app.controller('ExampleController', ['$scope', function($scope) {
console.log('...');
$scope.value1 = true;
$scope.value2 = 'YES'
}]); /* app.controller('DateController', ['$scope', function($scope) {
$scope.value = new Date(2015, 9, 22);
console.log($scope.value);
}]);*/
//上下两种写法都可以
function DateController($scope){
$scope.value = new Date(2015, 9, 22);
}
</script>
<div>
<hr>
<h3>ng-class</h3>
<p ng-class="{strike: deleted, bold: important, red: error}">Map Syntax Example</p>
<input type="checkbox" ng-model="deleted"> deleted (apply "strike" class)<br>
<input type="checkbox" ng-model="important"> important (apply "bold" class)<br>
<input type="checkbox" ng-model="error"> error (apply "red" class)
<hr>
<p ng-class="style">Using String Syntax</p>
<input type="text" ng-model="style" placeholder="Type: bold strike red">
<hr>
<p ng-class="[style1, style2, style3]">Using Array Syntax</p>
<input ng-model="style1" placeholder="Type: bold, strike or red"><br>
<input ng-model="style2" placeholder="Type: bold, strike or red"><br>
<input ng-model="style3" placeholder="Type: bold, strike or red"><br>
</div>
<div>
<hr>
<h3>ng-class-odd/even</h3>
<ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']">
<li ng-repeat="name in names">
<span ng-class-odd="'odd'" ng-class-even="'even'">
{{name}}
</span>
</li>
</ol>
</div>
<div><hr>
<h3>ng-click</h3>
<button ng-click="count = count + 1" ng-init="count=0">
Increment
</button>
<span>
count: {{count}}
</span>
</div>
<div><hr>
<h3>ng-show/hide</h3>
<span>Click me: </span><input type="checkbox" ng-model="checked"><br/>
<div>
Show:
<div style="background-color:#ccc" ng-show="checked">
<span> I show up when your checkbox is checked.</span>
</div>
</div>
<div>
Hide:
<div style="background-color:#258be3;color:white" ng-hide="checked">
<span> I hide when your checkbox is checked.</span>
</div>
</div>
</div>
<br/>
</body>
</html>
目前我了解到,有不少人使用Angular+ionic开发html5版本的app。
更多细节可以参考网站http://www.ionic.wang/start-index.html
另外,还有免费教程: http://www.ionic.wang/course-index.html
推荐的网站:
http://docs.angularjs.cn/api/ (api文档)
http://showcase.ngnice.com/#/home/home (常用实例)
http://docs.ngnice.com/guide/expression (开发文档)
最新文章
- [Java] - Google API调用
- [LintCode] Simplify Path 简化路径
- 兼容古董级IE小结
- django-url调度器-中级篇
- eas bos 编辑界面 editUIt 属性值为空
- php&;nbsp;curl_init函数用法
- CocoaPods报错:The dependency `xxx` is not used in any concrete target
- LeetCode: Surrounded Regions [130]
- 【milonga】什么意思_英语milonga在线翻译_有道词典
- Java swing: 实现ActionListener监听器的三种途径
- ASP.Net Controls 用法大全
- Mysql Index extends优化
- Tomcat 的设计模式分析
- (二)初探Maven之设置代理和阿里云镜像
- 关于Django字段类型中 blank和null的区别
- Python机器学习笔记 异常点检测算法——Isolation Forest
- hadoop day 2
- 报错:此版本的SQL Server Data Tools与此计算机中安装的数据库运行时组件不兼容
- Java reflect 反射 0 java对象的三个阶段
- input限制中文字数