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 属性的值。