第一 迭代输出之ng-repeat标签
ng-repeat让table ul ol等标签和js里的数组完美结合

例:

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

ps:可以指定输出的顺序
<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"/>
</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里的数据会放到请求体中。

还可以这样(get请求):

var url=web_sapi_domain+'shopping/MainServlet?req_fmt_type=jsonp&method=getVolumeGoods&req_str='+'{"addressId":"'+addressId+'","subStationId":"'+subStationId+'","voucherSn":"'+voucherSn+'","scope":"000000"}&callback=JSON_CALLBACK';
$http.jsonp(url).success(function(response){
response=angular.fromJson(response);)}



AngularJS 常用的功能的更多相关文章

  1. AngularJS进阶(十二)AngularJS常用知识汇总(不断更新中....)

    AngularJS常用知识汇总(不断更新中....) 注:请点击此处进行充电! app.controller('editCtrl',['$http','$location','$rootScope', ...

  2. AngularJS常用插件与指令收集

    angularjs 组件列表 bindonce UI-Router Angular Tree angular-ngSanitize模块-$sanitize服务详解 使用 AngularJS 开发一个大 ...

  3. RealView编译器常用特有功能(转)

    源:RealView编译器常用特有功能 一. 关键字和运算符 1. __align(n):指示编译器在n 字节边界上对齐变量. 对于局部变量,n 值可为 1.2.4 或 8. 对于全局变量,n 可以具 ...

  4. Impala系列: Impala常用的功能函数

    --=======================查看内置的函数--=======================hive 不需要进入什么内置数据库, 即可使用 show functions 命令列出 ...

  5. iOS常用小功能

    CHENYILONG Blog 常用小功能 技术博客http://www.cnblogs.com/ChenYilong/ 新浪微博http://weibo.com/luohanchenyilong  ...

  6. Gson Json 序列号 最常用的功能 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  7. iOS 网易彩票-6设置模块三(常用小功能)

    该篇文章中,用到很多iOS开发过程中常用的小功能,当前只是将这些功能集成到网易彩票的设置中.iOS-常用小功能介绍,请参考我的另一篇文章: iOS 常用小功能 总结:http://www.cnblog ...

  8. iOS 常用小功能 总结

    常用小功能 iOS中的很多小功能都是非常简单的,几行代码就搞定了,比如打电话.打开网址.发邮件.发短信等 打电话 方法一(不被采用): 拨号之前会弹框询问用户是否拨号,拨完后能自动回到原应用 NSUR ...

  9. 12.21 Gson的常用用法 功能介绍 特点

    使用谷歌GSON常用语法: 功能:映射Java Object与json格式的数据 1.通过Annotation注解来声明 2.支持自定义属性名称 3.支持包含或排除属性 4.支持自定义接口自己完成解析 ...

随机推荐

  1. asp.net 逻辑操作符与(&&),或(||),非(!)

    逻辑操作符与(&&),或(||),非(!)能根据参数的关系返回布尔值 public class bool{ public static void main(string [] args ...

  2. 如何保留自己对eclipse的个性化设置,在其他工程中使用

    有的个性化设置是在功能的.metadata\.plugins文件夹下保存.所以新建功能后,个性化设置都没有了. 解决办法: 新建一个工程后,调好个性化配置.然后备份整个工程. 以后不要新建工程,直接解 ...

  3. fft ocean注解

    针对这两篇教程: http://www.keithlantz.net/2011/10/ocean-simulation-part-one-using-the-discrete-fourier-tran ...

  4. block 对外部引用变量的处理

    MRC 环境 一.静态变量 和 全局变量   在加和不加  __block 都会直接引用变量地址.也就意味着 可以修改变量的值.在没有加__block 参数的情况下. 全局block 和 栈block ...

  5. android 对话框全屏

    对话框风格 <style name="Lam.Dialog.FullScreen" parent="@style/Theme.AppCompat.Dialog&qu ...

  6. 【iCore4 双核心板_ARM】例程八:定时器PWM实验——呼吸灯

    实验原理: STM32的定时器有PWM功能,iCore4的蓝色LED连接在定时器的输出接口上, 可以通过定时器的PWM输出控制LED的亮度,从而实验呼吸灯的功能. 核心代码: int main(voi ...

  7. Java知多少(36)内部类及其实例化

    在 Java 中,允许在一个类(或方法.语句块)的内部定义另一个类,称为内部类(Inner Class),有时也称为嵌套类(Nested Class). 内部类和外层封装它的类之间存在逻辑上的所属关系 ...

  8. react 生命周期钩子里不要写逻辑,否则不生效

    react 生命周期钩子里不要写逻辑,否则不生效,要把逻辑写在函数里,然后在钩子里调用函数,否则会出现问题.

  9. [原]pomelo基础知识(一)

    1.pomelo基本介绍 http://blog.gfdsa.net/2013/06/04/pomelo/pomelo_study_two/ 2.如何配置一个gate服务器 (1)首先 需要在game ...

  10. 网易大数据之数据存储:HDFS

    一.HDFS基础架构 1.HDFS特点:水平扩展.高容错性.廉价硬件.开源生态系统 2.Hadoop生态圈 1).分布式存储系统(HDFS),2).资源管理框架(YARN),3).批处理框架(MapR ...