angularjs使用ng-messages-include实例
<!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-include实例的更多相关文章
- 走进AngularJs(二) ng模板中常用指令的使用方式
通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...
- 走进AngularJs(八) ng的路由机制
在谈路由机制前有必要先提一下现在比较流行的单页面应用,就是所谓的single page APP.为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而a ...
- 黄聪:AngularJS 动态加载控制器实例-ocLoazLazy
一.AngularJS动态加载控制器和视图实例 路由配置关键代码: //二级页面 $stateProvider.state('main', { url: '/:name', /**如果需要动态加载数据 ...
- AngularJS 表达式中添加过滤器实例
过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中 历练实例: <!DOCTYPE html><html><head><meta http-equiv ...
- AngularJS入门基础——$provide.decorator 实例讲解
<body ng-controller="OneController"> <script> var Foobar = function() { ...
- 跟我学AngularJs:AngularJs入门及第一个实例
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:主要给大家介绍了AngularJs及其特性,并以3个实例来做说明. 本教程使用Angul ...
- AngularJS 学习之路(1)
AngularJS 是一个 JS 框架,适用于以数据操作为主的 SPA (Single Page Application)应用. 不再是 "先查找元素在操作元素",所有操作都以 & ...
- AngularJS进阶学习
参考:http://***/class/54f3ba65e564e50cfccbad4b 1. AJAX:Asynchronous JavaScript and XML(异步的 JavaScript ...
- 详解AngularJS中的依赖注入
点击查看AngularJS系列目录 依赖注入 一般来说,一个对象只能通过三种方法来得到它的依赖项目: 我们可以在对象内部创建依赖项目 我们可以将依赖作为一个全局变量来进行查找或引用 我们可以将依赖传递 ...
- AngularJS的初步学习(1)
AngularJS 是一个Javascript框架.它可通过 <script> 标签添加到 HTML 页面.AngularJS 通过 指令 扩展了 HTML,且通过 表达式绑定数据到 HT ...
随机推荐
- phpcms插件开发初步规范
phpcms公用库函数原型 (一)./include/global.php 中的函数可在phpcms的任何一个程序中调用,下面是各函数的原型及用法. message($alert,$goback='' ...
- PHP中检测ajax请求的代码例子
多数情况下,基于JavaScript 的Js框架如jquery.Mootools.Prototype等,在发出Ajax请求指令时,都会发送额外的 HTTP_X_REQUESTED_WITH 头部信息, ...
- smarty 中时间格式化的用法
大家都知道PHP中输出时间和日期可以用 date("Y-m-d H:i:s",时间戳) , 但是在smarty模板中,$time|date_format:'%Y-%m-%d %H ...
- php设计模式 1单例模式
之前很长时间之前就学习过设计模式,但是因为在实践中很少应用,所以忽略了,但现在却意识到设计模式很重要的,程序设计简介高效冗余性代码少. 今天开始把前几天学习的几个设计模式整理一下,首先当然是单例模式. ...
- c++学习笔记和思考
1.内置类型:int float等编程语言自己定义的类型 类类型:自己声明的类,即是对对象的抽象 2.const double *cp 表示cp是指向一个const类型double类型数据的指针,而非 ...
- android传送照片到FTP服务器
package com.photo; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundE ...
- SQLiteDatabase中的事务
beginTransaction():开始事务endTransaction():结束事务SQLiteDatabase还提供了如下方法来判断当前上下文是否处于事物环境中.inTransaction(): ...
- 我想要个pc和手机共有的客户端,就像百度云(iBarn网盘好用)
https://github.com/zhimengzhe/iBarn iBarn网盘是一个基于PHP开发的先进的云存储系统,提供文件的网络备份,同步和分享服务:支持断点续传,秒传等功能:可选择文件下 ...
- HDU - 5156 Harry and Christmas tree
题目链接 : http://acm.hdu.edu.cn/showproblem.php?pid=5156 题意 : 给一颗编号为1-n的以1为根的树, 已知有m个颜色的礼物分布在某些节点上(同一节点 ...
- Java Hibernate 主键生成10大策略
本文将介绍Hibernate中主键生成的几种策略方案,有需要的朋友可以参考一下. 1.自动增长identity 适用于MySQL.DB2.MS SQL Server,采用数据库生成的主键,用于为lon ...