AngularJS(九)ng-click(事件),angular.module 函数,表单,输入验证
来源:互联网 发布:网站网络结构设计 编辑:程序博客网 时间:2024/05/17 06:24
<div ng-app="myApp" ng-controller="personCtrl"><button ng-click="toggle()">隐藏/显示</button><p ng-hide="myVar">名: <input type=text ng-model="firstName"><br>姓: <input type=text ng-model="lastName"><br><br>姓名: {{firstName + " " + lastName}}</p></div><script>var app = angular.module('myApp', []);app.controller('personCtrl', function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; $scope.myVar = false; $scope.toggle = function() { $scope.myVar = !$scope.myVar; }});</script>
AngularJS 表单是输入控件的集合。
HTML 控件
- input 元素
- select 元素
- button 元素
- textarea 元素
<div ng-app="myApp" ng-controller="formCtrl"> <form novalidate> First Name:<br> <input type="text" ng-model="user.firstName"><br> Last Name:<br> <input type="text" ng-model="user.lastName"> <br><br> <button ng-click="reset()">RESET</button> </form> <p>form = {{user }}</p> <p>master = {{master}}</p></div><script>var app = angular.module('myApp', []);app.controller('formCtrl', function($scope) { $scope.master = {firstName:"John", lastName:"Doe"}; $scope.reset = function() { $scope.user = angular.copy($scope.master); }; $scope.reset();});</script>
构建一个ng表单
1.确保form上标签有一个name属性,像下面的例子一样。最好再加一个novalidate=”novalidate”
2.form中不能有action属性。提交交由ng-submit处理
3.每个input一定要有ng-model,最好有一个name方便引用。然后用require或者ng-minlength之类才起作用
<form name="form" novalidate="novalidate">
<label name="email">Your email</label>
<input type="email" name="email" ng-model="email" placeholder="Email Address" />
</form>
ng默认提供了验证
验证是否已输入文字,只需在标签上加上required:
<input type="text" ng-model="user.name" required />
验证至少输入{number}个字符,使用指令ng-minlength=“{number}”:
<input type="text" ng-model="user.name" ng-minlength="5" />
验证至多输入{number}个字符,使用指令ng-maxlength=“{number}”:
<input type="text" ng-model="user.name" ng-maxlength="20" />
确保输入匹配一个正则表达式,使用指令ng-pattern="/PATTERN/":
<input type="text" ng-model="user.name" ng-pattern="/a-zA-Z/" />
验证输入是一个Email,设置input的type属性为email:
<input type="email" name="email" ng-model="user.email" />
验证输入是一个数字,设置input的type属性为number:
<input type="number" name="number" ng-model="user.age" />
验证输入是一个URL,设置input的type属性为url
<input type="url" name="homepage" ng-model="user.weburl" />
- AngularJS(九)ng-click(事件),angular.module 函数,表单,输入验证
- AngularJs --ng-click事件
- angular ng-click获取触发事件对象
- ng-click 事件获取dom元素 angular
- angularjs ng-click 阻止事件冒泡
- angularjs-表单验证事件
- angular ng-messages 表单有效验证注意
- AngularJS ng-click bug
- angular ng-click获取触发事件对象this
- angular ng-click获取触发事件对象this
- AngularJS 表单(ng-form)验证
- AngularJS 表单(ng-form)验证
- angularjs学习 ng-Messages表单验证
- 完美解决angularjs的ng-click事件不起作用问题
- AngularJS表单和输入验证
- AngularJS 表单和输入验证
- 走进AngularJs(九)表单及表单验证
- 走进AngularJs(九)表单及表单验证
- Android多进程时Application初始化问题,大坑
- App Store 上架流程
- notepad++ 配置中出现的问题
- 数据库操作语句大全(sql)
- gRPC初探
- AngularJS(九)ng-click(事件),angular.module 函数,表单,输入验证
- 按键精灵 SayString输出文本乱码的解决方法
- 219. Contains Duplicate II
- C语言中struct与union的区别
- 日期之间的转换
- activemq jms spring 发送调优
- C# log的写法
- ACCP S1 C#第十四章 第十五章 上机练习
- segemtController 切换视图(可以左右滑动)