• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >AngularJS > angularJS提交表单(form)

angularJS提交表单(form)

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含angularJS提交表单(form)等相关知识,希望在学习及工作中可以帮助到您

代码很简单,就不多废话了,直接奉上代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<script src="http://localhost:81/js/jquery.js">
</script>
<script src="http://localhost:81/js/angular.min.js">
</script>
<body ng-app="app">
     <div ng-controller="TestCtrl">
        <div ng-form test>
          <input ng-model="a" type="email" />
          <button ng-click="do()">查看</button>
        </div>
      </div>
    <script>
    app = angular.module("app",[]);
   app.directive('test',function() {<br>          //form表单的指令都有一个默认的控制器作为第四个参数
        var link = function($scope, $element, $attrs, $ctrl) {
            $scope.do = function() {
                //$ctrl.$setDirty();
                console.log($ctrl.$pristine); //form是否没被动过
                console.log($ctrl.$dirty); //form是否被动过
                console.log($ctrl.$valid); //form是否被检验通过
                console.log($ctrl.$invalid); //form是否有错误
                console.log($ctrl.$error); //form中有错误的字段
            }
        }
        return {
            compile: function() {
                return link
            },
            require: 'form',
            restrict: 'A'
        }
    });
    app.controller('TestCtrl', function($scope){
        //如果没有contrller,这东西还不会初始化..
        });
    </script>
</body>
</html>
</div>

这里给大家分享的是最基础的angularJS表单验证,希望大家能够喜欢。

</div>

您可能想查找下面的文章:

相关文章

  • 2017-05-30angular route中使用resolve在uglify压缩后问题解决
  • 2017-05-30angularjs创建弹出框实现拖动效果
  • 2017-05-30浅析AngularJS Filter用法
  • 2017-08-24AngularJS——总结笔记
  • 2017-05-30AngularJS递归指令实现Tree View效果示例
  • 2017-05-30AngularJS基础 ng-src 指令简单示例
  • 2017-05-30AngularJS过滤器filter用法实例分析
  • 2017-05-30实践中学习AngularJS表单
  • 2017-05-30快速学习AngularJs HTTP响应拦截器
  • 2017-05-30angular十大常见问题

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • AngularJS动态生成div的ID源码解析
    • 详解angular中通过$location获取路径(参数)的写法
    • 如何用angularjs制作一个完整的表格
    • AngularJS基础 ng-mousemove 指令简单示例
    • AngularJS使用ng-options指令实现下拉框
    • 详解AngularJS中的filter过滤器用法
    • AngularJS指令与控制器之间的交互功能示例
    • 自学实现angularjs依赖注入
    • AngularJS 文件上传控件 ng-file-upload详解
    • AngularJS中的过滤器使用详解

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有