Angular的特点即为数据绑定，利用angular这一特点，可以减少传统表单提交获取表单数据繁琐的dom操作。
方法：给form里的每个表单控件绑定angular对象：使用ng-model
<form name="envForm" novalidate><div ><div class="row"><div class="col-xs-offset-1 col-xs-4"><div class="form-group" ng-class="error.newItem.environmentName?'':'has-error'"><label class="control-label">环境名称<input type="text" class="form-control" ng-model="env.newItem.environmentName" ></label></div></div><div class="col-xs-offset-2 col-xs-4" style="height:74px"><div class="form-group"><label class="control-label">项目名称<div class="dropdown" style="height:33px"><input class="btn btn-default dropdown-toggle" ng-model="env.newItem.projectKey" id="newPageDropdownMenu" data-toggle="dropdown" aria-haspopup="true"aria-expanded="true" style="width: 270px" readonly/><span class="caret" style="margin-left: 247px;margin-top: -55px"></span><ul class="dropdown-menu" aria-labelledby="newPageDropdownMenu"><li ng-repeat="x in configs"><a href="javascript:void(0)" ng-click="selectAndFill(x.constName)">{{x.constName}}</a></li></ul></div></label></div></div></div><div class="row"><div class="col-xs-offset-1 col-xs-4"><div class="form-group"><label>svn地址<input type="text" class="form-control" ng-model="env.newItem.svnAddress" id="svnAddress" name="svnAddress"></label></div></div><div class="col-xs-offset-2 col-xs-4"><div class="form-group"><label>入口地址<input type="text" class="form-control" ng-model="env.newItem.entryAddress" id="entryAddress" name="entryAddress" ></label></div></div></div><div class="row"><div class="col-xs-offset-1 col-xs-4"><div class="form-group"><label>运行jdk<input type="text" class="form-control" ng-model="env.newItem.jdkVersion" id="jdkVersion" name="jdkVersion"></label></div></div><div class="col-xs-offset-2 col-xs-4"><div class="form-group"><label>数据库地址<input type="text" class="form-control" ng-model="env.newItem.dbAddress" id="dbAddress" name="dbAddress"></label></div></div></div><div class="row"><div class="col-xs-offset-1 col-xs-4"><div class="form-group"><label>容器版本<input type="text" class="form-control" ng-model="env.newItem.containerVersion" id="containerVersion" name="containerVersion"></label></div></div><div class=" col-xs-offset-2 col-xs-4"><div class="form-group"><label>debug端口号<input type="text" class="form-control" ng-model="env.newItem.debugPortId" id="debugPortId" name="debugPortId"></label></div></div></div><div class="row"><div class="col-xs-offset-1 col-xs-4"><div class="form-group"><label>Profile端口号<input type="text" class="form-control" ng-model="env.newItem.profilePort" id="profilePort" name="profilePort"></label></div></div><div class="col-xs-offset-2 col-xs-4"><div class="form-group"><label>run端口号<input type="text" class="form-control" ng-model="env.newItem.runPort" id="runPort" name="runPort" ></label></div></div></div><div class="row"><div class="col-xs-offset-1 col-xs-4"><div class="form-group"><label>jvm参数<input type="text" class="form-control" ng-model="env.newItem.jvmParams" id="jvmParams" name="jvmParams" placeholder="-xms,-xmx,年轻代，持久代"></label></div></div></div> </div></form>
然后在js代码里将其初始化：
var myApp=angular.module("App",[]);myApp.controller('pannelCtrl',['$scope',"$http",function ($scope,$http) {$scope.env={newItem:{environmentName:'',// 环境名projectKey:'----请选择----',// 所属项目containerVersion:'',// 容器版本debugPortId:'',jdkVersion:'',entryAddress:'',dbAddress:'',jvmParams:'',profilePort:'',runPort:'',svnAddress:''}}}])// ng-module 结束标签
在提交表单的点击事件里添加如下代码：使用ajax请求传输json数据
$.ajax({url : 'saveEnv',type : "POST",data :$scope.env.newItem,dataType : "JSON",success : function(data) {//do something....});
