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

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

  • 相关阅读:
    深入学习图数据库语言Gremlin 系列文章链接汇总
    HugeGraph入门
    Connection 'ens33' is not available on device ens33 because device is strictly unmanaged
    正则里的\s和s有什么区别?
    LXMERT: Learning Cross-Modality Encoder Representations from Transformers
    Pixel-BERT: Aligning Image Pixels with Text by Deep Multi-Modal Transformers
    在vue中使用jsx语法
    JavaScript数据结构和算法
    如何用智能手机或PAD观看笔记本电脑的视频?
    linux shell和windows bat编写
  • 原文地址:https://www.cnblogs.com/raines/p/5154182.html
Copyright © 2011-2022 走看看