指令:ng-app 标记在dom上,就作用于该dom结构
===========================================
定义初始值 指令:ng-init
<div ng-app="" ng-init="quantity=1;price=5">
{{quantity}}{{price}}
</div> ——> 15
===========================================
数据绑定可放表达式:
<div ng-app="" ng-init="names=['Tom','Jerry','Gaffey']">
名字为: {{ names[0] }}
</div> ——> 名字为:Tom
===========================================
指令:ng-model
<div ng-app="">
请输入任意值:<input type="text" ng-model="name" />
你输入的为: {{ name }}
</div> ——> 当在input内输入对应的值,{{name}}也会相对改变。
===========================================
指令:ng-bind
<div ng-app="">
请输入一个名字:<input type="text" ng-model="name" />
Hello <span ng-bind="name"></span>
</div> ——> 指令ng-bind和AngularJS表达式{{}}有异曲同工之妙,但不同之处就在于ng-bind是在angular解析渲染完毕后才将数据显示出来的。
===========================================
指令:ng-click
<div ng-app="" ng-init="click=false">
<button ng-click="click= !click">隐藏/显示</button>
<div ng-hide="click">
请输入一个名字:<input type="text" ng-model="name" />
Hello <span ng-bind="name"></span>
</div>
</div> ——>点击事件
===========================================
使用MVVM模式有几大好处:
1. 低耦合:View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
可重用性:可以把一些视图的逻辑放在ViewModel里面,让很多View重用这段视图逻辑。
独立开发:开发人员可以专注与业务逻辑和数据的开发(ViewModel)。设计人员可以专注于界面(View)的设计。
可测试性:可以针对ViewModel来对界面(View)进行测试。
===========================================
指令 ng-controller
<div ng-app="" ng-controller="MyController">
请输入一个名字:<input type="text" ng-model="person.name">
Hello <span ng-bind="person.name"></span>
</div>
<script>
function MyController($scope) {
$scope.person = {
name: "World"
};
}
</script> ——>在dom上绑定对应的控制器,使用$scope来继承。
===========================================
常用指令
指令 ng-hide
用于控制部分HTML元素可见(ng-hide="false")和不可见状态(ng-hide="true”)。
<div ng-app="" ng-init="click=false">
<button ng-click="click= !click">我变</button>
<p ng-hide="click">显示了。</p>
<p ng-hide="!click">隐藏了。</p>
</div> ——> 点击“我变”,在click和!click之间切换,引号内的’click’ 变量,可以自定义,与下面的ng-hide对应做判断。
===========================================
指令 ng-repeat
遍历一个数据集合中的每个数据元素,并且加载HTML模版把数据渲染出来
<div ng-app="" ng-init="friends = [
{name:'Tom', age:25},
{name:'Jerry', age:28},
{name:'Tom', age:25},
{name:'Jerry', age:28}]">
<table>
<tr ng-repeat="x in friends">
<td> {{ 'Name:'+ x.name +' ,Age:'+ x.age}} </td>
</tr>
</table>
</div>
——>
Name:Tom ,Age:25
Name:Jerry ,Age:28
Name:Tom ,Age:25
Name:Jerry ,Age:28
===========================================
过滤器
用法:管道字符(|)+过滤器名。
<div ng-app="">
请输入: <input type="text" ng-model="name">
结果为: {{ name | uppercase}} //
</div> ——>’uppercase’把字母过滤成大写、’lowercase’把字母过滤成小写;
===========================================
<div ng-app="" ng-init="friends = [
{name:'tom', age:16},
{name:'jerry', age:20},
{name:'garfield', age:22}]">
输入过滤:<input type="text" ng-model="name" >
<ul style="list-style-type:none">
<li> 姓名,年龄</li>
<li ng-repeat="x in friends | filter:name">
{{ x.name + ' , ' + x.age }}
</li>
</ul>
</div> ——>对li下得内容进行变化,过滤器中的name与input内的输入值进行绑定。
===========================================