zoukankan      html  css  js  c++  java
  • Angular复习笔记(一)

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

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

  • 相关阅读:
    7-[CSS]-css介绍,引入方式
    6-[HTML]-标签属性
    5-[HTML]-body常用标签2
    4-[HTML]-body常用标签1
    3-[HTML]-head标签介绍
    2-[HTML]--介绍
    1-[前端]--前端内容介绍
    35
    33 -jQuery 属性操作,文档操作(未完成)
    1o xiaomi
  • 原文地址:https://www.cnblogs.com/raines/p/5154182.html
Copyright © 2011-2022 走看看