AngularJS 让人爱不释手的八种功能


Posted in Javascript onMarch 23, 2016

八种AngularJS让人爱不释手的功能分享给大家,供大家参考,具体内容如下

第一 迭代输出之ng-repeat标签

ng-repeat让table ul ol等标签和js里的数组完美结合

<ul>
<li ng-repeat="person in persons">
{{person.name}} is {{person.age}} years old.
</li>
</ul>

你甚至可以指定输出的顺序:

<li ng-repeat="person in persons | orderBy:'name'">

第二 动态绑定之ng-model标签

任何有用户输入,只要是有值的html标签,都可以动态绑定js中的变量,
而且是动态绑定。

<input type="text" ng-model='password'>

对于绑定的变量,你可以使用{{}} 直接引用

<span>you input password is {{password}}</span>

如果你熟悉fiter,你可以很容易的按你的需要格式输出

<span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>

第三 绑定点击事件之ng-click事件

使用ng-click你可以很容易的为一个标签绑定点击事件。

<button ng-click="pressMe()"/>

当然前提是你要在$scope域中定义的自己的pressMe方法。

和传统的onclick方法不同,你甚至可以为ng-click方法传递一个对象,就像这样:

<ul>
<li ng-repeat="person in persons">
<button ng-click="printf(person)"/>
</li>
</ul>

当然还有ng-dblclick标签

第四 分支语句之ng-switch on、ng-if/ng-show/ng-hide/ng-disabled标签

分支语句让你在界面上都可以写逻辑判断。

<ul>
<li ng-repeat="person in persons">
<span ng-switch on="person.sex">
<span ng-switch-when="1">you are a boy</span>
<span ng-switch-when="2">you are a girl</span>
</span>
<span ng-if="person.sex==1">you may be a father</span>
<span ng-show="person.sex==2">you may be a mother</span>
<span>
please input your baby's name:<input type="text" ng-disabled="!person.hasBaby"/>
</span>
<span>
</li>
</ul>

第五 校验语法之ng-trim ng-minlength ng-maxlength required ng-pattern 等标签

表单中的输入框,你可以使用上面的标签来实现对用户输入的校验。
从字面意思上你已经知道了它们的意思。

<form name="yourForm">
<input type="text" name="inputText" required ng-trim="true" ng-model="userNum" ng-pattern="/^[0-9]*[1-9][0-9]*$/" ng-maxlength="6" maxlength="6"/>
</form>

你可以通过 $scope.yourForm.inputText.$error.required 来判断输入框是否为空
你可以通过 $scope.yourForm.inputText.$invalid 来判断输入的内容是否满足ng-pattern,ng-maxlength,maxlength
你通过$scope.userNum获得的输入内容是去掉前后空白的,因为ng-trim的存在。

第六 下拉框之ng-options标签

ng-options是为下拉框专门打造的标签。

<select ng-model="yourSelected" ng-options="person.id as person.name in persons"></select>

下拉框中显示的是person.name,当你选中其中一个的时候,你可以通过yourSelected得到你选中的person.id.

第七 控制css之ng-style标签

ng-style帮你轻松控制你的css属性

<span ng-style="myColor">your color</span>

你可以通过给myColor赋值的形式来改变你想要的效果,就像这样:

$scope.myColor={color:'blue'};
$scope.myColor={cursor: 'pointer',color:'blue'};

第八 异步请求之$http对象

AngularJS 提供了一个类似jquery的$.ajax的对象,用于异步请求。
在AngularJS中对异步操作是推崇至极的,所以$http的操作都是异步的不像jquery.ajax里还提供了async参数。

$http({method : 'POST',params : { id:123}, data:{name:'john',age:27}, url : "/mypath"})
.success(function(response, status, headers, config){
//do anything what you want;
})
.error(function(response, status, headers, config){
//do anything what you want;
});

如果你是POST请求,params里的数据会帮你拼到url后面,data里的数据会放到请求体中。

看完之后是不是已经爱不释手了,那就好好的把这些应用到自己的项目中吧!

Javascript 相关文章推荐
js setattribute批量设置css样式
Nov 26 Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
jQuery简单倒计时效果完整示例
Sep 20 Javascript
JS 实现Base64编码与解码实例详解
Nov 07 Javascript
在 React、Vue项目中使用SVG的方法
Feb 09 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
Sep 28 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
Dec 04 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
Feb 21 Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 Javascript
websocket4.0+typescript 实现热更新的方法
Aug 14 Javascript
java中String类型变量的赋值问题介绍
Mar 23 #Javascript
基于javascript实现泡泡大冒险网页版小游戏
Mar 23 #Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 #Javascript
基于jquery编写的放大镜插件
Mar 23 #Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 #Javascript
JavaScript弹出对话框的三种方式
Mar 23 #Javascript
JS随机洗牌算法之数组随机排序
Mar 23 #Javascript
You might like
PHP正则表达式之定界符和原子介绍
2012/10/05 PHP
浅析php数据类型转换
2014/01/09 PHP
PHP+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
php读取txt文件并将数据插入到数据库
2016/02/23 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
Node.js中环境变量process.env的一些事详解
2017/10/26 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
postman自定义函数实现 时间函数的思路详解
2019/04/17 Javascript
JavaScript在web自动化测试中的作用示例详解
2019/08/25 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
2020/05/19 Javascript
Vue触发input选取文件点击事件操作
2020/08/07 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
python基于xml parse实现解析cdatasection数据
2014/09/30 Python
Python中的choice()方法使用详解
2015/05/15 Python
python实现按任意键继续执行程序
2016/12/30 Python
Python实现翻转数组功能示例
2018/01/12 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
python中for用来遍历range函数的方法
2018/06/08 Python
python实现多层感知器
2019/01/18 Python
selenium+python环境配置教程详解
2019/05/28 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
凯特王妃父母建立的派对用品网站:Party Pieces
2017/05/28 全球购物
6号汽车旅馆预订:Motel 6
2018/02/11 全球购物
Nordgreen英国官网:斯堪的纳维亚设计师手表
2018/10/24 全球购物
单位在职证明范本
2014/01/09 职场文书
生物学学生自我评价
2014/01/17 职场文书
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
横幅标语大全
2014/06/17 职场文书
法制宣传标语
2014/06/23 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
环保主题班会教案
2015/08/13 职场文书
大学副班长竞选稿
2015/11/21 职场文书
导游词之山西关帝庙
2019/11/01 职场文书
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android