首页
所有分类
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 相关文章推荐
js 加载时自动调整图片大小
May 28 Javascript
过虑特殊字符输入的js代码
Aug 05 Javascript
extjs之去除s.gif的影响
Dec 25 Javascript
JS 控件事件小结
Oct 31 Javascript
[JSF]使用DataModel处理表行事件的实例代码
Aug 05 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
JS中parseInt()和map()用法分析
Dec 16 Javascript
vue内置指令详解
Apr 03 Javascript
js字符串处理之绝妙的代码
Apr 05 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
Nov 17 Javascript
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
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) 越南购物网站(9) 菲律宾购物网站(13) 卡塔尔购物网站(3) 亚洲购物网站(6) 巴基斯坦购物网站(2) 匈牙利购物网站(11) 秘鲁购物网站(1) 北美洲购物网站(1) 缅甸购物网站(1)
You might like
Php中文件下载功能实现超详细流程分析
2012/06/13 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
thinkphp3.2实现跨控制器调用其他模块的方法
2017/03/14 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
Thinkphp 框架扩展之驱动扩展实例分析
2020/04/27 PHP
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
jquery键盘事件使用介绍
2011/11/01 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
jquery加载单文件vue组件的方法
2017/06/20 jQuery
Nodejs之http的表单提交
2017/07/07 NodeJs
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
Vue的轮播图组件实现方法
2018/03/03 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
element-ui循环显示radio控件信息的方法
2018/08/24 Javascript
webpack打包多页面的方法
2018/11/30 Javascript
vue 项目build错误异常的解决方法
2019/04/22 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
Python运行报错UnicodeDecodeError的解决方法
2016/06/07 Python
Python环境变量设置方法
2016/08/28 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
使用Python &amp; Flask 实现RESTful Web API的实例
2017/09/19 Python
Pycharm如何打断点的方法步骤
2019/06/13 Python
python pandas生成时间列表
2019/06/29 Python
python实现数学模型(插值、拟合和微分方程)
2020/11/13 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
2014道德模范事迹材料
2014/02/16 职场文书
信息管理应届生求职信
2014/03/07 职场文书
文化宣传方案
2014/03/13 职场文书
2014年售后服务工作总结
2014/11/18 职场文书
通知函格式范文
2015/04/27 职场文书
Python机器学习之底层实现KNN
2021/06/20 Python
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫
python实现双向链表原理
2022/05/25 Python