前端开发

 首页 > 前端开发 > AngularJS > AngularJS的表单使用详解_AngularJS_自学php网

AngularJS的表单使用详解_AngularJS_自学php网

分享到:
【字体:
导读:
          这篇文章主要介绍了AngularJS的表单使用详解,在JS原有的基础上提供了更多与HTML交互的功能,需要的朋友可以参考下...

 AngularJS提供丰富填写表单和验证。我们可以用ng-click来处理AngularJS点击按钮事件,然后使用 $dirty 和 $invalid标志做验证的方式。使用novalidate表单声明禁止任何浏览器特定的验证。表单控件使用了大量的角活动。让我们快速浏览一下有关事件先。
事件

AngularJS提供可与HTML控件相关联的多个事件。例如ng-click通常与按钮相关联。以下是AngularJS支持的事件。

  •     ng-click
  •     ng-dbl-click
  •     ng-mousedown
  •     ng-mouseup
  •     ng-mouseenter
  •     ng-mouseleave
  •     ng-mousemove
  •     ng-mouseover
  •     ng-keydown
  •     ng-keyup
  •     ng-keypress
  •     ng-change

ng-click

使用点击一个按钮的指令,表单重置数据。







验证数据

可使用下面跟踪误差。

  •     $dirty - 规定值已被改变。
  •     $invalid- 该值的状态是无效的。
  •     $error- 指出确切的错误。

例子

下面的例子将展示上述所有指令。
testAngularJS.html



Angular JS Forms



AngularJS Sample Application

Enter first name: First Name is required.
Enter last name: Last Name is required.
Email: Email is required. Invalid email address.

输出

在Web浏览器打开textAngularJS.html。看到结果如下。

2015617100230750.png?watermark/1/image/aHR0cDovL3N0YXRpYy5uYmxhLmNuLzEzMTAxMTYxMDktMi5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/0 (715×347)

分享到:
使用AngularJS来实现HTML页面嵌套的方法_...
 HTML不支持嵌入在HTML页面中的HTML页面。实现这一功能通过使用以下方式:     使用Ajax - 让一台服务器来调用获取相应的HTML页面,并将其设置在HTML控件的innerHTML。     使用服务器端包含 - JSP,PHP等Web端服务器技术可以在包括动态页面中的HTML页面。 使用AngularJS,我们可以用ng-include指令在一个HTM...
举例讲解AngularJS中的模块_AngularJS_自...
 AngularJS支持模块化的方法。模块用于单独的逻辑表示服务,控制器,应用程序等,并保持代码的整洁。我们在单独的js文件中定义的模块,并将其命名为按照module.js文件形式。在这个例子中,我们要创建两个模块。     Application Module - 用于初始化控制器应用程序     Controller Module - 用于定义控制器 ...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……