AngularJs v1.2.27 基础总结 by-麦浪XPEKI

指令

Angular.js应用的动态性和响应能力，都要归功于指令属性，常见的有：ng-app、ng-init、ng-model、ng-bind、ng-repeat等等。
demo:

Hello {{name}}

页面显示 Hello word
题外话: {{names[1]}} 如果names是一个数组 ng-init="names=['Tom','Jerry','Gaffey']"，则通过下标可以获取到对应的数组对象
ng-app
ng-app指令来标明一个AngularJS应用程序,同时载入和指令内容相关的模块，相当于标记了作用域。
ng-init
为AngularJS应用程序定义初始值
表达式
{{}}一般是两对花括号，括号内可以输出 数字 可以 输出 数组 {{ quantity * price }} {{ names[0] }}
ng-model
实现双向数据绑定 可以用于input 输入框等
ng-bind
和{{}}类似 但是他可以避免其未被渲染的模板被用户看到。
ng-click
点击事件指令
ng-hide="true"，设置HTML元素不可见。
综合demo:

显示和隐藏

请输入一个名字

控制器

控制器控制AngularJS应用程序的数据
ng-controller指令
就是用来定义应用程序控制器的，并且同时创建了一个新的作用域关联到相应的DOM元素上。
demo:
html

js var indexPage=function($scope){
$scope.person={
name:'你好我是控制器的数据'
}
}
$scope就是把一个DOM元素连结到控制器上的对象，它提供一个绑定到DOM元素(以及其子元素)上的执行上下文。它也是一个JavaScript对象，指向应用程序作用域内的所有HTML元素和执行上下文。
通过点击事件触发函数demo:
html

点击显示出发函数

js var main=function($scope){
$scope.person=function(){
$scope.number='我是数组';
}
}

常用的指令
一·
ng-hide
ng-show指令和ng-hide用法相同但行为相反
所以在能使用ng-if的情况,用它代替所有的ng-show和ng-hide吧！
ng-show指令虽然隐藏了但还是会执行其中的所有绑定，而ng-if就不同了，它只会在等于true的时候也就是显示的时候才去执行其中的绑定，这样一来性能就有很大的提高
二·
ng-repeat 循环渲染数据
demo:
html

js var repeatDemo=function($scope){
$scope.person=[
{name:'Tom', age:25},
{name:'Jerry', age:28},
{name:'Tom', age:25},
{name:'Jerry', age:28}
]
}

过滤器

过滤器可以实现对字符串的大小写转换、货币格式的转换、数组的过滤等等。
用法：管道字符(|)+过滤器名。
uppercase 转为大写 lowercase转为小写
demo:

filter过滤器可以过滤数组并从中选择出一个子集出来
demo:

{{ i.name + ' , ' + i.age }}

var repeatDemo=function($scope){
$scope.person=[
{name:'Tom', age:25},
{name:'peki', age:28},
{name:'will', age:25},
{name:'Jerry', age:28}
]
}