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 相关文章推荐
特殊字符、常规符号及其代码对照表
Jun 26 Javascript
jQuery中获取Radio元素值的方法
Jul 02 Javascript
对new functionName()定义一个函数的理解
May 22 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
jQuery切换所有复选框选中状态的方法
Jul 02 Javascript
深入php面向对象、模式与实践
Feb 16 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
bootstrap多种样式进度条展示
Dec 20 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 Javascript
webpack DllPlugin xxx is not defined解决办法
Dec 13 Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 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
轻松修复Discuz!数据库
2008/05/03 PHP
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
一段实用的php验证码函数
2016/05/19 PHP
php使用pdo连接sqlite3的配置示例
2016/05/27 PHP
php use和include区别总结
2019/10/13 PHP
PHP解决高并发的优化方案实例
2020/12/10 PHP
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
浅析JS获取url中的参数实例代码
2016/06/14 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
jQuery+PHP+Mysql实现抽奖程序
2020/04/12 jQuery
react-router中的属性详解
2017/06/01 Javascript
jquery实现掷骰子小游戏
2019/10/24 jQuery
vue prop属性传值与传引用示例
2019/11/13 Javascript
深入浅析Python中的yield关键字
2018/01/24 Python
小白如何入门Python? 制作一个网站为例
2018/03/06 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
pyhanlp安装介绍和简单应用
2019/02/22 Python
python制作简单五子棋游戏
2019/06/18 Python
Django之编辑时根据条件跳转回原页面的方法
2019/08/21 Python
菲律宾领先的在线时尚商店:Zalora菲律宾
2018/02/08 全球购物
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
绘画设计学生的个人自我评价
2013/09/20 职场文书
小学后勤管理制度
2014/01/14 职场文书
写演讲稿要注意的六件事
2014/01/14 职场文书
美术指导求职信
2014/03/17 职场文书
《学会合作》教学反思
2014/04/12 职场文书
操行评语大全
2014/04/30 职场文书
软件售后服务方案
2014/05/29 职场文书
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
装修公司管理制度
2015/08/05 职场文书
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
Python内置数据结构列表与元组示例详解
2021/08/04 Python
Linux安装apache服务器的配置过程
2021/11/27 Servers