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