前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Angularjs基础(十)

Angularjs基础(十)

作者头像
用户1197315
发布2018-01-22 10:44:29
3.3K0
发布2018-01-22 10:44:29
举报
文章被收录于专栏:柠檬先生柠檬先生柠檬先生

ng-blur  描述:规定blur 事件的行为       实例:当输入框失去焦点的(onblur)时执行表达式:

		        <input ng-blur="count = count + 1" ng-init="count=0"/>
		        <h1>{{count}}</h1>

      定义和用法           ng-blur 指令用于告诉AngularJS HTML 元素在失去焦点时须执行的表达式。           语法:<element ng-blur="expression"></element>           参数值:值:expression 描述:失去焦点时执行的表达式。

ng-change 描述:规定在内容改变时执行的表达式。       实例:当输入框 的值改变时执行函数。

		        <body ng-app="myApp">
			          <div ng-controller="myCtrl">
				            <input type="text" ng-change="myFunc()" ng-model="myvalue">
				            <p>The input field has changed {{count}} times.</p>
			          </div>
		        </body>
		        <script>
			            angular.module('myApp',[])
			            .controller('myCtrl',['$scope',function($scope){
				            $scope.count =0;
				            $scope.myFunc = function(){
					                $scope.count++;
				              }
			            }])
		      </script>

    定义和用法         ng-change 指令用于告诉AngularJS 在HTML元素值改变时需要执行的操作。         ng-change 指令需要搭配ng-model 指令使用。         AngularJS ng-change 指令指令不会覆盖原生的 onchange 事件, 如果触发该事件,ng-change 表达式与原生的 onchange 事件都会执行。         ng-change 事件在值的每次改变时触发,它不需要等等一个完成的修改过程或等待失去焦点的动作         ng-change 事件只针对输入框值的真实修改,而不是通过JavaScript 来修改。         语法:<element ng-change="expression"></element>         参数值: 值:expression 描述:元素值改变时执行表达式。

ng-checked 规定元素是否被选中         实例:选择一个或选择所有选项:

		          <body ng-app="">
			            <p>My:</p>
			            <input type="checkbox" ng-model="all">
			            <input type="checkbox" ng-checked="all">
			            <input type="checkbox" ng-checked="all">
            <input type="checkbox" ng-checked="all">
		          </body>

        定义和用法             ng-checked 指令用于设置复选框(checkbox)或单选按钮(radio)的checked 的属性。             如果ng-checked 属性返回true ,复选框(checkbox) 或单选按钮(radio)将会被选中。         语法:             <input type="checkbox | radio" ng-checked="expression">             参数值: 值:expression 描述; 如果返回true ,将会选中元素选项。

ng-class 描述:指定HTML 元素使用的CSS 类。         实例:修改<div>元素的类:

		            <select ng-model="home">
			            <option value="sky">Sky</option>
			            <option value="tomato">Tomato</option>
		            </select>
		            <div ng-class="home">
			              <h1>Welcome Home !</h1>
			              <p>I like it !</p>
		            </div>

        定义和用法             ng-class 指令用于给HTML 元素动态绑定一个或多个CSS 类。             ng-class 指令的值可以是字符串,对象,或一个数组。             如果是字符串,多个类名使用空格分隔。             如果是对象,需要使用 key-value 对,key 是一个布尔值,value 为你想要添加的类名。只有在 key 为 true 时类才会被添加。             如果是数组,可以由字符串或对象组合组成,数组的元素可以是字符串或对象。             语法:<element> ng-class="expression"</element>             参数值: 值:expression 描述: 表达式返回一个或多个类名。

ng-class-even 描述:类似ng-class,但只在偶数行起作用。         实例:为表格的偶数行设置 class="striped":

			          <table>
				            <tr ng-repeat="x in records" ng-class-even="'striped'" >
					            <td>{{x.Name}}</td>
					            <td>{{x.Country}}</td>
				            </tr>
			        </table>

      定义和用法           ng-class-even 指令用于为HTML 元素动态的绑定一个或多个CSS 类,但只能为偶数行。           ng-class-even 指令需要 与ng-repeat 指令搭配使用。           ng-class-even 指令建议使用 在表格的样式渲染中,但是所有HTML 元素都是支持的。           语法 <element ng-class-even="expression"></element>           参数值:值:expression 描述: 达到指定一个或多个css 类。

ng-class-odd 类似ng-class,但只在奇数行起作用。         实例:为表格的偶数行设置 class="striped";

			          <table ng-controller="myCtrl">
				            <tr ng-repeat="x in records" ng-class-odd="'striped'" >
					            <td>{{x.Name}}</td>
					            <td>{{x.Country}}</td>
				            </tr>
			        </table>

      定义和用法         ng-class-odd 指令用于为HTML 元素动态的绑定一个或多个CSS 类,但只能为奇数行。         ng-class-odd 指令需要 与ng-repeat 指令搭配使用。         ng-class-odd 指令建议使用 在表格的样式渲染中,但是所有HTML 元素都是支持的。         语法:<element ng-class-odd="expression"></element>         参数值: 值: expression 描述: 表达式指定一个或多个CSS 类。

ng-click 定义元素被点击时的行为        实例:按钮没次点击时,计数变量count自动加1;

			          <button ng-click ="count = count + 1" ng-init="count=0">OK</button>

      定义和用法           ng-click 指令告诉了AngularJS HTML 元素被点击后需要执行的操作。       语法:<element ng-click="expression"></element>       参数值: 值:expression 描述: 元素被点击后执行的表达式。

ng-cloak 在应用正要加载时防止其闪烁。        实例:页面加载时防止应用闪烁。

			        <div ng-app="">
				          <p ng-cloak>{{5 + 5}}</p>
			        </div>

      定义和用法         ng-cloak 指令用于在AngularJS 应用在加载时防止AngularJS 代码未加载完而出现的问题。       语法: <element ng-cloak></element>     参数值: ng-clock 指令没有参数。

ng-controller 定义应用的控制器对象。         实例:为应用变量添加控制器。

			          <div ng-app="myApp" ng-controller="myCtrl">
				              Full Name:{{firstName + " " +lastName}}
			          </div>	
			          <script>
				              var app = angular.module('myApp',[]);
				              app.controller('myCtrl',function($scope){
					                $scope.firstName = "John";
					                $scope.lastName = "Doe";
				            })
			        </script>

      定义和用法           ng-controller 指令用于为你的应用添加控制器。       语法:<element ng-controller="expression"></element>       参数值: 值: expression 描述: 控制器

ng-copy 描述:规定拷贝事件的行为。        实例:在输入框的文本拷贝时执行表达式

			          <input ng-copy="count = count + 1" ng-init="count=0" value="Copy this text">

      定义和用法           ng-copy 指令用于告诉AngularJS在HTML 元素文本被拷贝时要执行的操作。       语法: <element ng-copy="expression"></element>       参数值: 值:expression 描述:元素文本被拷贝时执行的表达式。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016-04-28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档