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 相关文章推荐
Javascript 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
node在两个div之间移动,用ztree实现
Mar 06 Javascript
用js实现控件的隐藏及style.visibility的使用
Jun 14 Javascript
Jquery Validate 正则表达式实用验证代码大全
Aug 23 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
JS基于Mootools实现的个性菜单效果代码
Oct 21 Javascript
javascript制作照片墙及制作过程中出现的问题
Apr 04 Javascript
详解vue的数据binding绑定原理
Apr 12 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 Javascript
layui table 表格模板按钮的实例代码
Sep 21 Javascript
js实现九宫格抽奖
Mar 19 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安全性问题中的:Null 字符问题
2013/06/21 PHP
PHP 安全检测代码片段(分享)
2013/07/05 PHP
php正则替换处理HTML页面的方法
2015/06/17 PHP
laravel实现上传图片并在页面显示的例子
2019/10/14 PHP
js电信网通双线自动选择技巧
2008/11/18 Javascript
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
2013/04/02 Javascript
12种不宜使用的Javascript语法整理
2013/11/04 Javascript
JS:window.onload的使用介绍
2013/11/13 Javascript
使用js实现数据格式化
2014/12/03 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
JavaScript采用递归算法计算阶乘实例
2015/08/04 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
2018/08/27 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
Python多线程下载文件的方法
2015/07/10 Python
PyCharm中Matplotlib绘图不能显示UI效果的问题解决
2020/03/12 Python
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
Python 解决相对路径问题:&quot;No such file or directory&quot;
2020/06/05 Python
python编写实现抽奖器
2020/09/10 Python
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
台湾演唱会订票网站:StubHub台湾
2019/06/11 全球购物
抵押贷款承诺书
2014/05/30 职场文书
品牌服务方案
2014/06/03 职场文书
简历中自我评价范文
2015/03/11 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
2015年化妆品销售工作总结
2015/05/11 职场文书
安全生产感想
2015/08/07 职场文书
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL