首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

AngularJS使用指令增强标准表单元素功能

Posted in Javascript onJuly 01, 2016

Angular 可使用指令无缝地增强标准表单元素的功能，我们将讨论它的优点，包括：
数据绑定、建立模型属性、验证表单、验证表单后反馈信息、表单指令属性
下面我们通过案例验证他们的用法：

一、双向数据绑定（ng-model）和建立模型属性

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
 <title>Angular Directive</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
<!-- 案例：双向数据绑定 -->
<div class="panel" ng-controller="defaultCtrl">
 <!-- 过滤complete为false的项 -->
 <h3 class="panel-header">To Do List<span class="label label-info">{{(todos | filter : {complete : 'false'}).length}}</span></h3>
 <div class="row-fluid">
 <div class="col-xs-6">
  <div class="form-group row">
  <label for="action">Action: </label>
  <!-- ng-model 双向绑定 -->
  <!-- 双向数据绑定：数据模型（Module）和视图（View）之间的双向绑定。 -->
  <!-- 当其中一方发送更替后，另一个也发生变化 -->
  <input type="text" id="action" ng-model="newToDo.action" class="form-control">
  </div>
  <div class="form-group row">
  <label for="location">Location: </label>
  <select id="location" class="form-control" ng-model="newToDo.location">
   <option>Home</option>
   <option>Office</option>
   <option>Mall</option>
  </select>
  </div>
  <!-- ng-click点击Add添加项目 -->
  <button class="btn btn-primary btn-block" ng-click="addNewItem(newToDo)">Add</button>
 </div>
 <div class="col-xs-6">
  <table class="table table-bordered table-striped">
  <thead>
   <tr><th>#</th><th>Action</th><th>Done</th></tr>
  </thead>
  <tbody>
   <tr ng-repeat="item in todos">
   <!-- $index默认为0,递增 -->
   <td>{{$index + 1}}</td>
   <td>{{item.action}}</td>
   <td>
    <input type="checkbox" ng-model="item.complete"/>
   </td>
   </tr>
  </tbody>
  </table>
 </div>
 </div>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
// define a module named exampleApp
angular.module("exampleApp", [])
 // define a controller named defaultCtrl
 .controller('defaultCtrl', function ($scope) {
 // 数据模型
 $scope.todos = [
  { action : "play ball", complete : false },
  { action : "singing", complete : false },
  { action : "running", complete : true },
  { action : "dance", complete : true },
  { action : "swimming", complete : false },
  { action : "eating", complete : false },
 ];
 // 添加数据到模型
 $scope.addNewItem = function (newItem) {
  // 判断是否存在
  if (angular.isDefined(newItem) && angular.isDefined(newItem.action) && angular.isDefined(newItem.location)) {
  $scope.todos.push({
   action : newItem.action + " (" + newItem.location + ")",
   complete : false
  })
  }
 }
 })
</script>
</body>
</html>

首先定义了数据模型scope.todos和添加数据到模型的addNewItem()方法，接着使用双向数据绑定ng−model将视图中表单的action和location和模型中的 scope.todos进行绑定，
最后通过ng-click点击属性触发添加数据到模型的addNewItem()方法完成操作

AngularJS使用指令增强标准表单元素功能

二、验证表单
在我们提交表单到服务器之前，我们需要来检测一下用户提交的数据是否存在或者是说合法，否则提交无用的数据会浪费资源。

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
 <title>Angular Directive</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
 <style>

 </style>
</head>
<body>

<div id="todoPanel" class="panel" ng-controller="defaultCtrl">
 <!-- novalidate表示抛弃浏览器自带的表单验证，用NG自己的验证 -->
 <!-- ng-submit="addUser(newUser) 当表单数据合法时,提交数据到模型 -->
 <form name="myForm" novalidate ng-submit="addUser(newUser)">
 <div class="well">
  <div class="form-group">
  <label>Name:</label>
  <!-- required 表该表单必填 -->
  <!-- ng-model="newUser.name" 双向数据绑定 -->
  <input name="userName" type="text" class="form-control" required ng-model="newUser.name">
  </div>
  <div class="form-group">
  <label>Email:</label>
  <input name="userEmail" type="email" class="form-control"required ng-model="newUser.email">
  </div>
  <div class="checkbox">
   <label>
   <input name="agreed" type="checkbox"ng-model="newUser.agreed" required>
   I agree to the terms and conditions
   </label>
  </div>
  <!-- g-disabled="myForm.$invalid" 当前面填写表单中的任意一项不合法时，该提交按钮都是不可用的 -->
  <button type="submit" class="btn btn-primary btn-block" ng-disabled="myForm.$invalid">
  OK
  </button>
 </div>
 <div class="well">
  Message: {{message}}
  <div>
  Valid: {{myForm.$valid}}
  </div>
 </div>
 </form>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
angular.module("exampleApp", [])
 .controller("defaultCtrl", function ($scope) {
 // 添加用户数据到模型$scope.message
 $scope.addUser = function (userDetails) {
 $scope.message = userDetails.name
 + " (" + userDetails.email + ") (" + userDetails.agreed + ")";
 }
 // 显示验证前后的结果
 $scope.message = "Ready";
});
</script>
</body>
</html>

首先定义了数据模型scope.message和添加数据到模型的addUser()方法，接着在视图中添加表单元素validate、name属性和ng−submit属性随后使用双向数据绑定ng−model将视图中表单的action和location和模型中的 scope.todos进行绑定，且使用验证属性required和email表单
之后对提交按钮进行禁用，仅当表单数据全部合法才能用，不合法都禁用（ng-disabled=”myForm.$invalid”）
最后通过ng-submit属性提交数据到模型的addUser()方法完成操作

AngularJS使用指令增强标准表单元素功能

三、表单验证反馈信息
我们仅仅对表单进行验证是远远不够的，因为用户不知道为什么出错而感到困惑，因此我们需要反馈信息给用户，让他们明白该填写什么
先介绍一下NG中要验证的类

ng-pristine      用户没交互元素被添加到这个类
ng-dirty          用户交互过元素被添加到这个类
ng-valid         验证结果有效元素被添加到这个类
ng-invalid      验证结果无效元素被添加到这个类

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
 <title>Angular Directive</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
 <style>
 /*交互且必填样式*/
 form.validate .ng-invalid-required.ng-dirty {
  background-color: orange;
 } 
 /*交互不合法样式*/
 form .ng-invalid.ng-dirty {
  background-color: lightpink;
 }
 /*邮件不合法且交互过*/
 form.validate .ng-invalid-email.ng-dirty {
  background-color: lightgoldenrodyellow;
 }
 div.error{
  color: red;
  font-weight: bold;
 }
 div.summary.ng-valid{
  color: green;
  font-weight: bold;
 }
 div.summary.ng-invalid{
  color: red;
  font-weight: bold;
 }
 </style>
</head>
<body>

<!-- 案例：双向数据绑定 -->
<div class="panel" ng-controller="defaultCtrl">
 <!-- novalidate="novalidate" 仅仅NG表单验证 -->
 <!-- ng-submit="addUser(newUser)" 添加数据到模型 -->
 <!-- ng-class="showValidation ? 'validate' : '' 当验证合法，showValidation为true，这是触发ng-class为validate -->
 <form name="myForm" class="well" novalidate="novalidate" ng-submit="addUser(newUser)" ng-class="showValidation ? 'validate' : ''">
 <div class="form-group">
 <div class=" form-group">
  <label>Email: </label>
  <input name="email" type="email" class="form-control" required="required" ng-model="newUser.email">
  <!-- 验证提示信息 -->
  <div class="error">
  <!-- 显示反馈信息 -->
  <span ng-class="error" ng-show="showValidation">
   {{getError(myForm.email.$error)}}
  </span>
  </div>
 </div>
 <button type="submit" class="btn btn-primary btn-block" >OK</button>
 <div class="well">
  Message : {{message}}
  <!-- 当myForm.$valid验证合法，showValidation为true，这是触发ng-class为ng-valid，否则，ng-invalid -->
  <div class="summary" ng-class="myForm.$valid ? 'ng-valid' : 'ng-invalid'" >
  Valid : {{myForm.$valid}}
  </div>
 </div>
 </form>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
// define a module named exampleApp
angular.module("exampleApp", [])
 // define a controller named defaultCtrl
 .controller('defaultCtrl', function ($scope) {
 // 添加数据到模型
 $scope.addUser = function (userDetails) {
  if (myForm.$valid) {
  $scope.message = userDetails.name + " (" + userDetails.email + ") (" + userDetails.agreed + ")"; 
  } else {
  $scope.showValidation = true;
  }
 }
 // 数据模型
 $scope.message = "Ready";
 // 错误反馈信息
 // 当没有填写信息时，提示Please enter a value
 // 当验证出错时，提示Please enter a valid email address
 $scope.getError = function (error) {
  if (angular.isDefined(error)) {
  if (error.required) {
   return "Please enter a value";
  } else if (error.email) {
   return "Please enter a valid email address";
  }
  }
 }

 })
</script>
</body>
</html>

首先在style中定义反馈信息的样式、表单验证的样式
接着在JS中写入错误时反馈的信息
最后在视图中绑定ng-class

AngularJS使用指令增强标准表单元素功能

四、表单指令属性
1.使用input元素

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
 <title>Angular Directive</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
 <style>

 </style>
</head>
<body>


<div class="panel" id="todoPanel" ng-controller="defaultCtrl">
 <form name="myForm" novalidate="novalidate">
 <div class="well">
  <div class="form-group">
  <label>Text: </label>
  <!-- ng-required="requireValue" 通过数据绑定required值 -->
  <!-- ng-minlength="3" ng-maxlength="10" 允许最大最小字符-->
  <!-- ng-pattern="matchPattern" 正则匹配 -->
  <input name="sample" class="form-control" ng-model="inputValue" ng-required="requireValue" ng-minlength="3"
  ng-maxlength="10" ng-pattern="matchPattern">
  </div>
 </div>
 <div class="well">
  <!-- 必填 -->
  <p>Required Error: {{myForm.sample.$error.required}}</p>
  <!-- 最小最大长度 -->
  <p>Min Length Error: {{myForm.sample.$error.minlength}}</p>
  <p>Max Length Error: {{myForm.sample.$error.maxlength}}</p>
  <!-- 只匹配小写字母 -->
  <p>Pattern Error: {{myForm.sample.$error.pattern}}</p>
  <!-- 验证合法 -->
  <p>Element Valid: {{myForm.sample.$valid}}</p>
 </div>
 </form>

</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
// define a module named exampleApp
angular.module("exampleApp", [])
 // define a controller named defaultCtrl
 .controller('defaultCtrl', function ($scope) {
 $scope.requireValue = true;
 $scope.matchPattern = new RegExp("^[a-z]");
 })
</script>
</body>
</html>

AngularJS使用指令增强标准表单元素功能

2.选择列表

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
 <title>Angular Directive</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
 <style>

 </style>
</head>
<body>


<div class="panel" id="todoPanel" ng-controller="defaultCtrl">
 <form name="myForm" novalidate="novalidate">
 <div class="well">
  <div class="form-group">
  <label>Selection an action: </label>
  <!-- 遍历列表 按照item.place排序 item.id as item.action 改变选项值-->
  <!-- ng-options="item.id as item.action group by item.place for item in todos" -->
  <select ng-model="selectValue" ng-options="item.id as item.action group by item.place for item in todos">
   <option value="" class="">(Pick One)</option>
  </select>
  </div>
 </div>
 <div class="well">
  <p>Selected: {{selectValue || "None"}}</p>
 </div>
 </form>

</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
// define a module named exampleApp
angular.module("exampleApp", [])
 // define a controller named defaultCtrl
 .controller('defaultCtrl', function ($scope) {
 // 模型数据
 $scope.todos = [
  { id : 100, place : "School", action : "play ball", complete : false },
  { id : 200, place : "Home", action : "eating", complete : false },
  { id : 300, place : "Home", action : "watch TV", complete : true }
 ];
 })
</script>
</body>
</html>

AngularJS使用指令增强标准表单元素功能

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

AngularJS使用指令增强标准表单元素功能

- Author -

super_yang_android

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
js实现单一html页面两套css切换代码
Apr 11 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
js 走马灯简单实例
Nov 21 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
jquery实现上下左右滑动的方法
Feb 09 Javascript
jQuery的ajax和遍历数组json实例代码
Aug 01 Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
Apr 04 Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 Javascript
JavaScript 去重和重复次数统计
Mar 31 Javascript
AngularJS实现分页显示数据库信息
Jul 01 #Javascript
AngularJS内建服务$location及其功能详解
Jul 01 #Javascript
学习Angularjs分页指令
Jul 01 #Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 #Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 #Javascript
很棒的Bootstrap选项卡切换效果
Jul 01 #Javascript
AngularJS优雅的自定义指令
Jul 01 #Javascript
频偏(1) 电路(15) 实习报告(1) AM(1) 鉴频器(1) 原理(1) 频率(1) 灵敏度(1) 发烧友(1) 探测器(1)
You might like
Codeigniter购物车类不能添加中文的解决方法
2014/11/29 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
PHP自毁程序(慎用)
2015/07/09 PHP
Laravel执行migrate命令提示：No such file or directory的解决方法
2016/03/16 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
JavaScript 浏览器对象模型BOM使用介绍
2015/04/13 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
jQuery中常用动画效果函数知识点整理
2018/08/19 jQuery
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
Moment.js实现多个同时倒计时
2019/08/26 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
vue实现给div绑定keyup的enter事件
2020/07/31 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
python组合无重复三位数的实例
2018/11/13 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
一文解决django 2.2与mysql兼容性问题
2020/07/15 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
2014/09/02 HTML / CSS
莫斯科制造商的廉价皮大衣：Fursk
2020/06/09 全球购物
威盛公司软件C++工程师笔试题面试题
2012/07/16 面试题
策划总监岗位职责
2014/02/16 职场文书
建议书怎么写
2014/03/12 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
国家助学贷款承诺书
2015/04/30 职场文书
Nginx流量拷贝ngx_http_mirror_module模块使用方法详解
2022/04/07 Servers