zoukankan      html  css  js  c++  java
  • Angularjs基础(十二)

    ng-model-options       描述:规定如何更新模型
                实例: 在失去焦点时绑定输入框的值scope 变量中。

                              <div ng-app="myApp" ng-controller="myCtrl">
                      <input ng-model ="name">
                    </div>    
                    <script>
                        var app = angular.module('myApp',[]);
                        app.controller('myCtrl',function($scope){
                            $scope.name = "John Doe";
                        })
                    </script>                            

                定义和用法: ng-model-options 指令绑定到了HTML 表单元素到scope变量中。
                语法:<element ng-model-options="option"></element>

    ng-mousedown         描述:规定按下鼠标按键时的行为。
                实例:在鼠标按下时执行表达式;

                    <div ng-mousedown="count = count +1" ng-init="count="count=0">点我!</div>
                    <h1>{{count}}</h1>

                定义和用法:ng-mousedown 指令用于告诉AngularJS鼠标在制定的HTML 元素上按下时执行的操作。、
                      鼠标点击执行的顺序,1.Mousedown 2.Mouseup 3.Click
                语法:<element ng-mousedown="expression"></element>
                参数值: 值: expression 描述:鼠标点击时执行的表达式。

    ng-mouseenter          描述:规定鼠标指针穿过元素时的行为。
                实例:在鼠标执行穿过元素时执行表达式               

                    <div ng-mouseenter="count = count + 1" ng-init="count=0">鼠标闯过我</div>
                    <h1>{{count}}</h1>

                定义和用法:ng-mouseenter 指令告诉AngularJS 鼠标在HTML元素穿过时要执行的操作。
                语法: <element ng-mouseenter="expression"></element>
                参数值: 值expression 描述:鼠标穿过元素是执行的表达式。

    ng-mouseleave           描述:规定鼠标指针离开元素是的行为。
                实例:在鼠标指针离开是执行表达式。

                  <div ng-mouseleave="count = ccount + 1" ng-init="count=0">鼠标从我这离开。</div>
                  <h1>{{count}}</h1>

                定义和用法: ng-mouseleave 指令用于告诉AngularJS 鼠标从HTML 元素上移开是要执行的操作。
                语法: <element ng-mouseleave="expression"></element>
                参数值: 值:expression 描述: 鼠标在元素上移开时执行的表达式。

    ng-mousemove           描述:规定鼠标指针在指定的元素中移动时的行为。
                实例:在鼠标指针在元素上移动时执行表达式。               

                    <div ng-mousemove="count = count + 1" ng-init="count=0">在我这移动鼠标</div>
                    <h1>{{count}}</h1>

                定义和用法
                    ng-mousemove 指令用于告诉AngularJS 鼠标在HTML 元素上移动时要执行的操作。
                语法: <element ng-mousemove="expression"></element>
                参数值: 值:expression 描述: 鼠标在元素上移动时值移动时执行 的表达式。

    ng-mouseover             描述:规定鼠标指针位于元素上方的行为。
                实例:在鼠标指针移动到元素上时执行表达式。               

                    <div ng-mouseover="count = count + 1" ng-init="count=0">鼠标移动到我这</div>
                    <h1>{{count}}</h1>    

                定义和用法:ng-mouseover 指令告诉AngularJS鼠标移动到指定的HTML 元素上时执行的操作。
                语法: <element ng-mouseover="expression"></element>
                参数值: 值: expression 描述: 鼠标移动到元素上时执行的表达式。

    ng-mouseup               描述:规定当在元素上松开鼠标按钮时的行为
                实例:松开鼠标按钮时执行的表达式:              

                  <div ng-mouseup="count = count + 1" ng-init="count=0">点我!</div>
                  <h1>{{count}}</h1>

                定义和用法: ng-mouseup 指令告诉AngularJS鼠标在指定的HTML元素上松开鼠标按钮(点击完成)时执行的操作。
                语法: <element ng-mouseup="expression"></element>
                参数值: 值:expression 描述:鼠标点击完成松开按键时执行的表达式

    ng-non-bindable     描述:规定元素或子元素不能绑定数据。
                实例:以下段落不需要使用AngularJS                 

                    <div ng-app="">
                      <p ng-non-bindable>这个代码不需要使用AngularJS:{{5+5}}</p>
                    </div>

                定义和用法:ng-non-bindable 指令用于告诉 AngularJS 当前的 HTML 元素或其子元素不需要编译。
                语法: <element ng-non-bindable></element>
                没有参数值:

    ng-open         描述:指定元素的open 属性。
            实例:通过点击checkbox 显示或隐藏<details>列表

                 <input type="checkbox" ng-model = "showDetaile">
                  <delatils ng-open="showDetails">
                    <summary>123</summary>
                  </delatils>

            定义和用法: ng-open 指令用于设置details 列表的open属性。如果ng-open的表达式返回true则datails 列表是可见的。
            语法:<datails ng-open="expression"></details>
            参数值: 值:expression 描述:如果表达式为true则会设置details的open属性。

    ng-options         描述:在<select>列表中指定<options>
              实例:使用数组元素填充下拉列表:

                <div ng-app="myApp" ng-controller="myCtrl">
                    <select ng-model="selectedName" ng-options="item for item in name "></select>
                </div>
                <script>
                  var app = angular.module('myApp',[])
                  app.controller('myCtrl',function($scope){
                      $scope.name = ["Emil","Tobias","Linus"];
                  })
                </script>

              定义和用法:
                  ng-options 指令用于使用<options>填充<select>元素的选项。
                  ng-options指令使用数组来填充下拉列表,多次情况下与ng-repeat 指令一起使用。
                  语法: <select ng-opctions="array expression"><element>
              参数值: 值: array expression 描述:数组中为select元素填充选项的表达式。

    ng-paste         描述:规定粘贴事件的行为。
            实例:文本被粘贴时执行表达式
                <input ng-paste="count = count + 1" ng-init="count=0" value="粘贴文本到这"/>
            定义和用法: ng-paste 指令用于告诉AngularJS 文本在HTML 元素上粘贴时需要执行的操作。
                  ng-paste指令不会覆盖元素的原生onpaste事件,事件被触发时,ng-paste表达式与原生的opaste 事件都会执行。
            语法: <element ng-paste="expression"></element>
            参数值:值 expression 描述:文本粘贴到元素上执行的表达式。

    ng-pluralize       描述:根据本地化规则显示信息

    ng-readonly        描述:指定元素的readonly 属性。
            实例:设置输入框为只读。

              <input type="checkbox" ng-model="all">
              <input type="text" ng-readonly="all">

            定义和用法:ng-readonly 指令用于设置表单域(input 或 textarea)的readonly 属性。
                  如果ng-readonly 属性的表达式返回true 则表单域为只读。
            语法:<input ng-readonly="expression"></input>
            参数值: 值:expression 描述: 表达式返回true 则表单域为只读。

    ng-repeat         描述:定义集合中每项数据的模板
            实例:循环输出多个标题:

              <body ng-app="myApp" ng-controller="myCtrl">
                <h1 ng-repeat="x in records">{{x}}</h1>
              <script>
                  var app = angular.module("myApp",[]);
                  app.controllar("myCtrl",function($scope){
                    $scope.records = [
                            "123",
                            "234",
                            "345"
                            "456"
                      ]
                    })
                  </script>

            定义和用法
                  ng-repeat指令用于循环输出指定次数的HTML元素。集合必须是数组或对象。
            语法:<element ng-repeat="expression"></element>
            参数值:值 expression 描述 表达式定义了如何循环集合,

    ng-selected       描述:指定元素的selected 属性
            实例:获取选中的选项:

              <input type="checkbox" ng-model="mySel">
                <p>123</p>
              <select>
                <option>Volvo</option>
                <option ng-selected="mySel">BMW</option>
                <option>Ford</option>
              </select>

            定义和用法:
                ng-selected 指令用于设置<select>列表中的<option>元素的selected 属性。
                ng-selected 属性的表达式返回true则选项被选中。
            语法:<option ng-selected="expression"></option>
            参数值: 值:expression 描述:如果表达式为true 则选项被选中。

    ng-show         描述:显示或隐藏HTML元素。
            实例:复选框选中时显示部分内容。

                <input type="checkbox" ng-model="myVar">
                <div ng-show="myVar">
                <h1>Welcome</h1>
                <p>Welcome to my home</p>
                </div>

            定义和用法:
                  ng-show 指令在表达式为true 时显示指定的HTML元素,否则隐藏指定的HTML。
                  参数值; 值:expression 描述:如果表达式为true则显示指定的HTML元素。

    ng-srcset       描述:指定<img>元素的srcset 属性。
            实例:定义图片的资源地址。   

              <div ng-init="mgVar = 'http://www.123.com/angular.jpg'">
                <h1>Angular</h1>
                <img ng-srcset="{{myVar}}">
              </div>

            定义和用法: ng-srcset 指令覆盖了 <img> 元素的 srcset 属性。
              语法:<img ng-srcset="string "></img>
            参数值: 值: string 描述: 表达式返回的字符串。

    ng-style       描述:指定元素的style 属性。
          实例:使用AngularJs 添加样式,使用css key=>value 对象格式:

          <body ng-app="myApp" ng-controller="myCtrl">
              <h1 ng-style="myObj">12345</h1>
            <script>
              var app=angular.module("myApp",[]);
              app.controller("myCtrl",function($scope){
              $scope.myObj = {
                "color":"white",
                "background-color":"coral",
                "font-size":"60px",
                "padding ":"50px"
              }
            })
          </script>

          定义和用法:ng-style 指令为HTML元素添加style 属性。ng-style 属性值必须是对象,表达式返回的也是对象。
          语法:<element ng-style="expression"></element>
          参数值: 值string 描述:表达式返回由css属性和值组成的对象。

    ng-submit           描述:规定onsubmit 事件发生是执行的表达式。
             实例:表单提交后执行函数:

              <body ng-app="myApp" ng-controller="myCtrl">
                  <form ng-submit="myFunc()">
                    <input type="text">
                    <input type="submit">
                  </form>
                  <p>{{myText}}</p>
                <script>
                  var app = angular.module("myApp",[]);
                  app.controller("myCtrl",function($scope){
                  $scope.myTxt = "你还没有点击提交!";
                  $scope.myFunc = function (){
                      $scope.myText = "你点击了提交!"
                  }
                  })
              </script>

            定义和用法: ng-submit 指令用于在表单提交后执行指定函数。
            语法: <form ng-submit="expression"></form>
            参数值: 值: expression 描述: 表单提交后函数被调用,或者一个表达式将被执行,表达式返回函数调用。

    ng-switch           描述:规定显示或隐藏子元素的条件。
              实例:根据选中的值显示对应部分:         

              <div ng-switch="myVar">
                <div ng-switch-when="runoob">
                    <h1>1</h1>
                    <p>234</p>
                </div>
                <div ng-switch-when="google">
                    <h1>2</h1>
                    <p>345</p>
                </div>
                <div ng-switch-when="taobao">
                    <h1>3</h1>
                    <p>456</p>
                </div>
                <div ng-switch-default>
                  <h1>4</h1>
                  <p>567</p>
                </div>
              </div>

            定义和用法: ng-switch 指令根据表达式显示或隐藏对应的部分。
            语法:<element ng-switch="expression">
                <element ng-switch-when="value"></element>
                <element ng-switch-when="value"></element>
                <element ng-switch-when="value"></element>
                <element ng-switch-default></element>
               </element>
            参数值: 值: expression 描述: 表达式会让匹配项显示,不匹配项移除。

    ng-transclude     描述:规定填充的目标位置。

    ng-value         描述:规定input元素的值。
            实例:设置输入框的值:

              <div ng-app="myApp" ng-controller="myCtrl">
                <input ng-value="myVar">
              <div>
              <script>
                  var app = angular.module("myApp",[]);
                  app.controller('myCtrl',function($scope){
                      $scope.myVar = "Hello World!";
                })
              </script>

          定义和用法: ng-value 指令英语设置input 或select元素的value属性。
          语法:<input ng-value="expression"></input>
          参数值: 值:expression 描述: 表达式用于设置value 属性的值。

  • 相关阅读:
    Leetcode Unique Binary Search Trees
    Leetcode Decode Ways
    Leetcode Range Sum Query 2D
    Leetcode Range Sum Query
    Leetcode Swap Nodes in Pairs
    Leetcode Rotate Image
    Leetcode Game of Life
    Leetcode Set Matrix Zeroes
    Leetcode Linked List Cycle II
    CF1321A
  • 原文地址:https://www.cnblogs.com/nmxs/p/5462352.html
Copyright © 2011-2022 走看看