Angularjs基础(十)

悠悠 2023-06-11 04:21 15阅读 0赞

**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 描述：元素文本被拷贝时执行的表达式。

更多专业前端知识，请上 **【猿2048】www.mk2048.com**