angularjs使用ng-messages-include实例
2016-10-13 14:37
369 查看
<!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <meta charset="utf-8"> <title>注册</title> <link rel="stylesheet" href="../bootstrap.min.css"> </head> <body> <form name="signup_form" novalidate ng-submit="signupForm()" ng-controller="signupController"> <fieldset> <legend>Signup</legend> <div class="row"> <div class="col-xs-12"> <label>Your name</label> <input type="email" placeholder="Name" name="name" ng-model="signup.name" ng-minlength="3" ng-maxlength="20" required> <div class="error" ng-messages="signup_form.name.$error" ng-messages-multiple> <small ng-message="minlength">覆盖模板中的提示不能小于3位</small><!--这样可以覆盖模板中的提示--> <div ng-messages-include="templates/errors.html"></div> <!--或者这样写 <ng-messages-include src="templates/errors.html"></ng-messages-include> --> </div> </div> </div> <button type="submit" class="btn btn-default">Submit</button> </fieldset> </form> <script src="../angular.min.js"></script> <script src="angular-messages.min.js"></script> <script> angular.module('app', ['ngMessages']) .controller('signupController', function($scope) { }) </script> </body> </html>
templates中的代码
<small ng-message="required">必填</small> <small ng-message="email">邮箱不正确</small> <small ng-message="minlength">不能小于3位</small> <small ng-message="maxlength">不能大于20位</small>
以上展示的是实例代码
用法
1.<div ng-messages-include="templates/errors.html"></div> 2.<ng-messages-include src="templates/errors.html"></ng-messages-include>
相关文章推荐
- angularjs使用ng-messages的注册表单实例
- angularjs中使用ng-bind-html和ng-include的实例
- angularjs中使用ng-bind-html和ng-include
- angularjs中ng-include使用被注释或者报错解决方法
- AngularJs的ng-include的使用与实现
- AngularJS中ng-include随屏幕宽度改变实例
- angularJS中include的页面的ng-model不能实时存取
- AngularJS中使用ng-repeat的index
- AngularJS: 使用ng-option生成下拉框并在controller调用
- AngularJS: 使用ng-option生成下拉框并在controller调用
- AngularJS使用 ng-options 实现传值给后台controller
- 初次使用AngularJS中的ng-view,路由控制
- 在使用angularjs过程,ng-repeat中track by的作用
- 实例详解angularjs和ajax的结合使用
- AngularJs 在ng-repeat中动态使用ng-model进行双向数据绑定(二)
- Angularjs ng-table的使用(可以加button)以及angularjs学习资料
- AngularJS[ng-include]实现页面共用
- [AngularJS] Angular 1.3 ngMessages with ngAnimate
- 走进AngularJs(二) ng模板中常用指令的使用方式
- angularJs利用ng-include搭建最基本的一个包含过滤器、控制器的页面