欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-03-07 10:17:30
angular 可使用指令无缝地增强标准表单元素的功能，我们将讨论它的优点，包括： 数据绑定、建立模型属性、验证表单、验证表单后反馈信息、表单指令属性 下面我们通过...

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使用指令增强标准表单元素功能

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

上一篇： Python入门之 Python内置函数

下一篇： 使用Ajax实时检测"用户名、邮箱等"是否已经存在

推荐阅读