本文主要介绍AngularJs Forms,这里整理了相关资料及简单示例代码,有需要的朋友可以参考下
控件(input、select、textarea)是用户输入数据的一种方式。Form(表单)是这些控件的集合,目的是将相关的控件进行分组。
表单和控件提供了验证服务,所以用户可以收到无效输入的提示。这提供了更好的用户体验,因为用户可以立即获取到反馈,知道如何修正错误。请记住,虽然客户端验证在提供良好的用户体验中扮演重要的角色,但是它可以很简单地被绕过,因此,客户端验证是不可信的。服务端验证对于一个安全的应用来说仍然是必要的。
一、Simple form
理解双向数据绑定的关键directive是ngModel。ngModel提供了从model到view和view到model的双向数据绑定。并且,它还向其他directive提供API,增强它们的行为。
<!DOCTYPE HTML> <html lang="zh-cn" ng-app="SimpleForm"> <head> <meta charset="UTF-8"> <title>PropertyEvaluation</title> <style type="text/css"> .ng-cloak { display: none; } </style> </head> <body> <p ng-controller="MyCtrl" class="ng-cloak"> <form novalidate> 名字: <input ng-model="user.name" type="text"><br/> Email: <input ng-model="user.email" type="email"><br/> 性别: <input value="男" ng-model="user.gender" type="radio">男 <input value="女" ng-model="user.gender" type="radio">女 <br/> <button ng-click="reset()">还原上次保存</button> <button ng-click="update(user)">保存</button> </form> <pre class="brush:php;toolbar:false">form = {{user | json}}
saved = {{saved | json}}