angularJS 标签指令

angularJS中除了ng开头的属性指令，还有标签指令、自定义指令等。

标签指令：对原有的标签进行了重新的构建，并有了新的功能

<a>：阻止默认行为，阻止刷新页面
<select>
-ng-options（需要与ng-model结合使用）
代码示例：

    <script>var m = angular.module('myApp',[]);//引入相应模块m.controller('Aaa',['$scope',function($scope){$scope.colors=[{name:"red"},{name:"yellow"},{name:"blue"}];}]);</script><div ng-controller="Aaa" ng-app="myApp"><a href="">{{myColor.name}}<select ng-options="color.name for color in colors" ng-model="myColor"></select></div>

页面结果展示：

<textarea>
<input>
<form>
-novalidate：阻止表单默认行为
代码示例：

<form novalidate><input type="email">
</form>

表单验证

$valid：表单验证成功返回真，验证失败返回假（验证格式不合格时不通过）
$invalid：与valid相反，表单验证失败返回真，验证成功返回假
$pristine：原始值即进行验证的值是初始值，未进行修改则返回true，修改后则返回false
$dirty：与pristine相反
$error：无论是验证成功还是验证失败，验证信息均会在此
注意点：
— name的方式进行查找
— 要写ng-model

代码示例：

    <script>var m = angular.module('myApp',[]);//引入相应模块m.controller('Aaa',['$scope',function($scope){$scope.colors="hello";}]);</script><div ng-controller="Aaa" ><form novalidate name="myForm"><input type="text" name="myText" ng-model="colors"><div>{{myForm.myText.$valid}}</div><div>{{myForm.myText.$invalid}}</div><div>{{myForm.myText.$pristine}}</div><div>{{myForm.myText.$dirty}}</div></form></div>

页面结果展示：

改变了原始值：

type:类型验证
-email
-number
-url
required：判断是否为空，空为true，非空为false
ng-minlength：当字符串的长度大于该值时返回false，字符串长度小于该值时返回true。验证成功false，失败返回true。
ng-maxlength
ng-pattern：通过正则来限制内容，验证成功返回false，失败返回true

代码示例：

    <script>var m = angular.module('myApp',[]);//引入相应模块m.controller('Aaa',['$scope',function($scope){$scope.colors="hello";}]);</script><div ng-controller="Aaa" ><form novalidate name="myForm"><input type="text" name="myText" ng-model="colors" required ng-minlength="4" ng-pattern="/^[a-zA-Z]+$/"><div>{{myForm.myText.$valid}}</div><div>{{myForm.myText.$invalid}}</div><div>{{myForm.myText.$pristine}}</div><div>{{myForm.myText.$dirty}}</div><div>{{myForm.myText.$error}}</div></form></div>

页面结果展示：

通过表单验证设置CSS样式：
.class

.ng-valid{}：验证成功显示该样式
.ng-invalid{}：验证失败显示该样式
.ng-pristine{}：保留原始值显示该样式
.ng-dirty{}：修改元素值显示该样式

代码示例：

    <style type="text/css">input.ng-valid {border:1px red solid;}input.ng-invalid {border:1px green solid;}</style>

页面结果展示：

表单验证例子：

代码示例：

<script src="angular.min.js"></script>
<script>var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){$scope.regText = {regVal : 'default',regList : [{ name : 'default' , tips : '请输入用户名'},{ name : 'required' , tips : '用户名不能为空'},{ name : 'pattern' , tips : '用户名必须是字母'},{ name : 'pass' , tips : '√'}]};$scope.regPassword = {regVal : 'default',regList : [{ name : 'default' , tips : '请输入密码'},{ name : 'required' , tips : '密码不能为空'},{ name : 'minlength' , tips : '密码至少6位'},{ name : 'pass' , tips : '√'}]};$scope.change = function( reg , err ){for(var attr in err){if( err[attr] == true ){$scope[reg].regVal = attr;return;}}$scope[reg].regVal = 'pass';};}]);<div ng-controller="Aaa"><form novalidate name="nForm"><div><label>用户名:</label><input type="text" name="nText" ng-model="regText.name" required ng-pattern="/^[a-zA-Z]+$/" ng-blur="change('regText',nForm.nText.$error)"><span ng-repeat=" re in regText.regList | filter : regText.regVal ">{{ re.tips }}</span></div><div><label>密码:</label><input type="password" name="nPassword" ng-model="regPassword.name" required ng-minlength="6" ng-blur="change('regPassword',nForm.nPassword.$error)"><span ng-repeat=" re in regPassword.regList | filter : regPassword.regVal ">{{ re.tips }}</span></div></form>
</div>

页面结果展示：

angularJS 标签指令相关推荐

angularjs directive scope变化为啥html,学习AngularJs:Directive指令用法（完整版）
本教程使用AngularJs版本:1.5.3 摘要:Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR ...
AngularJS - 自定义指令
这一篇从自定义指令出发,记录了定义一个指令时影响指令行为的各种因素. 试着感受这些因素,让自己更高效地编写AngularJS应用. Directive 先从定义一个简单的指令开始. 定义一个指令本质上 ...
AngularJS: 自定义指令与控制器数据交互
<!doctype html> <html><head><meta charset="utf-8"><title>Ang ...
AngularJs 常用指令标签
1.ng-app:告诉Angular他应该管理页面的那一部分,可以放在html元素上也可以放在div等标签上例:<html ng-app="problem"> 2.n ...
AngularJS自定义指令详解（有分页插件代码）
前言除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 通过 .directive() 函数来添加自定义的指令. 调用自定义指令时,需要在HTMl 元素上添加自定义指令名. 自定义指 ...
Angularjs标签模板加载原理
前言 Angularjs提供多种模板加载方案. 最基础的为通过预先声明路径的方式,通过Ajax获取. 使用诸如gulp-html2js构建工具,将HTML模板转化为js文件使用. 使用script标签 ...
AngularJS Slider指令(directive)扩展
继上一篇基于jQuery UI Autocomplete的AngularJS 指令(directive)扩展,在这里发布一个AngularJS的Slider扩展.如果你还不了解AngularJS话的情 ...
AngularJS自定义指令–隔离范围教程
Earlier we looked at different directive properties and created a simple directive using those prope ...
AngularJS自定义指令教程第2部分
In the previous post, we created a simple directive to manipulate the DOM's behavior. In this post, ...

angularJS 标签指令

标签指令：对原有的标签进行了重新的构建，并有了新的功能

表单验证例子：

angularJS 标签指令相关推荐

最新文章

热门文章

angularJS 标签指令

标签指令 ：对原有的标签进行了重新的构建，并有了新的功能

表单验证例子：

angularJS 标签指令相关推荐

最新文章

热门文章

标签指令：对原有的标签进行了重新的构建，并有了新的功能