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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端小叙

vue父组件向子组件动态传值的两种方法

在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行...

69010
来自专栏抠抠空间

JavaScript之事件及动画

一、事件 常用事件 click(function(){...}) //单击事件 hover(function(){...}) //鼠标经过事件 b...

2885
来自专栏小壮和前端

es6之深入理解promise对象

900
来自专栏xingoo, 一个梦想做发明家的程序员

快速排序

快速排序时间复杂度为O(nlogn),由于是在原数组上面利用替换来实现,因此不需要额外的存储空间。 算法思想:   通过设置一个岗哨,每次跟这个岗哨进行比较,比...

21110
来自专栏阮一峰的网络日志

CSS 变量教程

今年三月,微软宣布 Edge 浏览器将支持 CSS 变量。 这个重要的 CSS 新功能,所有主要浏览器已经都支持了。本文全面介绍如何使用它,你会发现原生 CSS...

34911
来自专栏xingoo, 一个梦想做发明家的程序员

简单选择排序

选择排序时间复杂度也为O(n^2) 算法思想: 选择排序即每次length-i的长度内选择一个最小的元素,与第一个进行替换,这样大循环length次后,就可以得...

2206
来自专栏技术博文

mysql中int长度的意义

疑问: mysql的字段,unsigned int(4), 和unsinged int(5), 能存储的数值范围是否相同。如果不同,分别是多大? 答: 无论是i...

3074
来自专栏JavaEE

JavaScript的使用前言

JavaScript作为使用得最多的脚本语言,可以说是无处不在。所有主流浏览器都支持JavaScript。目前,全世界大部分网页都使用JavaScript。它可...

992
来自专栏我的博客

DOM基础知识

1.DOM介绍 DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话...

2964
来自专栏快乐八哥

前端知识小结

1. var a=null==undefined?1:"abc"; var b=typeof(a); var c=typeof(b); var d=typeof...

1789

扫码关注云+社区

领取腾讯云代金券