码迷,mamicode.com
首页 > 其他好文 > 详细

Angular复习笔记(一)

时间:2016-01-23 23:16:22      阅读:448      评论:0      收藏:0      [点我收藏+]

标签:

指令: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内的输入值进行绑定。

===========================================

Angular复习笔记(一)

标签:

原文地址:http://www.cnblogs.com/raines/p/5154182.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!