AngularJS实现了数据双向绑定,改变了html格局下需手写大段js来处理动态数据问题。
引入AngularJS,然后在应用AnglarJS的外层标签中添加ng-app="xxApp",这样该标签及其中内容被声明为了xxApp。类似的通过ng-controller标签声明controller,controller需属于某个app中,因此应该在ng-app标签之内(可以在同一个标签上),对应mvc中的controller层。在controller中可以包含多个model,通过添加ng-model来进行数据绑定。一个简单的form表单如下所示
<body ng-app="goodsAddApp" ng-controller="goodsController"> <form name="form" ng-submit="processForm()"> <div class="row"> <label for="goodsName">商品名称:</label> <input ng-model="goods.name" name="goodsName" type="text" ng-minlength="3" required name-validation> <span class="error" ng-show="form.goodsName.$error.required ">不能为空</span> <span class="error" ng-show="form.goodsName.$error.minlength ">长度不足3位</span> <span class="error" ng-show="form.goodsName.$error.exist ">已存在</span> </div> <div class="row"> <label>关键词(通过空格分割):</label> <input ng-model="goods.keyWord" name="name" type="text"> </div> <input type="submit" name="提交"> </form>
其中ng-submit表示表单的提交方法为processForm(),而required用于非空校验、ng-minlength用于最短长度校验、name-validation则是自定义的校验(需要注册nameValidation方法)。再看一下脚本
<script type="text/javascript"> var app = angular.module('goodsAddApp',[]); app.controller('goodsController',function($scope,$http){ $scope.processForm = function(isValid){ if(!isValid){ alert("表单校验失败"); return; } $http({ method:'POST', url:'save', data:$.param($scope.goods), headers:{ 'Content-Type': 'application/x-www-form-urlencoded' } }).success(function(data){ console.log(data); if(!data.success){ $scope.errorName = data.errors.name; }else{ $scope.message = data.message; } }) }; }); app.directive('nameValidation', function($http) { return { require : 'ngModel', link : function(scope,elm,attrs,ctrl){ elm.bind('focusout',function(){ $http({method:'POST',url:"exists",data:elm.val()}). success(function(data,status,headers,config){ ctrl.$setValidity('exist',!data); }) }) } } }); </script>
第一行将刚才声明的app注册为AngularJS中的module对象,第二行则是注册controller,并声明了该作用域下的js方法,app.directive('nameValidation', function($http) {则是为app注册了自定义的校验方法。例中方法为后台校验名称是否重复ctrl.$setValidity('exist',!data)方法将校验错误定义为exist。 formName.inputfieldName.$error.validatorName 可以取到某字段的某个校验的结果。
笔者遇到的几个错误:
- 一开始将input的name设置为了“name”,然后ng-show="form.name.$error.required"没有起作用,后来改为了其它的名称才生效,说明form存在固有属性为name,导致语义出错。
- ng-app没有设置名字,然后报错 AngularJS-Argument 'xxx' is not a function,got undefined,这是因为Angular从1.3.0beta15版本开始不再支持全局的controller,需要改为 xxxModule.controller('xxxCtrl',function($scope){}
更详细的表单校验参照http://www.cnblogs.com/rohelm/p/4033513.html