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

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

  • 相关阅读:
    是什么造成了数据库的卡顿
    机器学习笔记(六) ---- 支持向量机(SVM)
    机器学习笔记(五)---- 决策树
    了解 MongoDB 看这一篇就够了【华为云分享】
    王晶:华为云OCR文字识别服务技术实践、底层框架及应用场景 | AI ProCon 2019
    【HUAWEI Mate30】抽奖啦!华为IoT新福利上线!
    高性能Web动画和渲染原理系列(2)——渲染管线和CPU渲染
    【华为云社区】悟一下动态规划
    理解递归与动态规划
    Laravel 文件上传失败的问题 error 7
  • 原文地址:https://www.cnblogs.com/raines/p/5154182.html
Copyright © 2020-2023  润新知