首页 > 代码库 > 关于AngularJs，数据绑定与自定义验证
关于AngularJs，数据绑定与自定义验证
最近开始着手学起了Angular，抱着好奇的心情开始研究了起来。忽然发现angular可以巧妙而方便的进行数据的绑定验证啊什么的。（当然，我只是刚开始学，所有可能有更强大的功能，只是我还没有看到）
那么先从我学习的数据绑定和数据验证开始说起吧
首先，肯定是引用
1 <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>然后它需要一个模板
<form ng-app="myApp" name="myForm"> <div ng-controller="MyCtryTest"> <table> <tr> <td>姓名</td> <td>年龄</td> </tr> <tr ng-repeat="x in pageData"> <td>{{ x.Name }}</td> <td>{{ x.Age }}</td> </tr> </table> </div> 输入你的名字: <input name="myName" ng-model="myText" required> Email: <input type="email" name="myAddress" ng-model="myAddressText" required> {{myForm.myAddress.$valid}} <input multiple-idcard name="user_idCard" ng-model="user.idCard" required class="form-control" placeholder="自定义验证" /> 验证通过：{{myForm.user_idCard.$valid}} </form>ng，是angular规定的自己属性的一个前缀，form中的app就是相当于一个代码块，也可以理解为ID吧，反正我是这么理解的。
其实它特别像MVC，它也需要一个自己的controller，来定义一个div或者什么里面需要做的事情，大家可以看到我第二行的
ng-repeat，就是定义一个循环，x in pageData，这里是不是很像foreach？x是定义的变量名， in 是数据从哪里来，
pageData就是我们的数据，那么大家肯定会问，pageData是哪里来的？大家看下面的js，在第七行中，我把response中返回的Data给了pageData，也就是说，我循环的就是从服务端取得的
数据，下面就是实例中的js，我做了一个简单的封装。
然后至于验证，像email啊，number啊，这个在angular中都有，你只要在input中，type="email"或"number"就好了，如果是非空的话，直接加一个required就好，则重需要注意的就是
{{myForm.myAddress.$valid}}，这个中的myForm，指的就是你form中给的name，myAddress是input中的name，那么，$valid就是返回一个验证是否通过，true或false，主要需要
关心的，是我们的自定义验证，在整个 appData.directive 中都是为了实现自定义验证，那么，这个js和input是怎么关联起来的呢？
大家可以看一下，在input中，有一个自定义属性，multiple-idcard，那么，在我封装的js方法中的最后一个参数multipleIdcard，他们两个是不是相同的呢？那么，我们要注意的是，在
我们input中的自定义属性，中间要有一个-，在js中，-后面的首字母要大写，这样他们两就能匹配起来了。
是不是很简单？学习了下，我还是蛮喜欢angular的。
1 window.onload = bindRep("myApp", "MyCtryTest", "/Data/repData.ashx", "/^[1-9]\\d{5}[1-9]\\d{3}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{4}$/", "multipleIdcard"); 2 3 function bindRep(app, controller, url, validation, bind) { 4 var appData =http://www.mamicode.com/ angular.module(app, []); 5 appData.controller(controller, function ($scope, $http) { 6 $http.get(url) 7 .success(function (response) { $scope.pageData =http://www.mamicode.com/ response.Data; }); 8 }); 9 appData.directive(bind, [10 function () {11 return {12 require: "ngModel",13 link: function (scope, element, attr, ngModel) {14 if (ngModel) {15 var idCardsRegexp = eval(validation);16 console.log(idCardsRegexp);17 }18 debugger;19 var customValidator = function (value) {20 var validity = ngModel.$isEmpty(value) || idCardsRegexp.test(value);21 ngModel.$setValidity(bind, validity);22 return validity ? value : undefined;23 };24 ngModel.$formatters.push(customValidator);25 ngModel.$parsers.push(customValidator);26 }27 };28 }29 ]);30 }
这是我从服务端返回的数据
StringBuilder sbuJson = new StringBuilder(); sbuJson.AppendLine("{\"Data\":["); sbuJson.AppendLine("{\"Name\":\"zhangsan\",\"Age\":\"18\"},"); sbuJson.AppendLine("{\"Name\":\"lisi\",\"Age\":\"19\"},"); sbuJson.AppendLine("{\"Name\":\"wangwu\",\"Age\":\"20\"},"); sbuJson.AppendLine("{\"Name\":\"zhaoliu\",\"Age\":\"21\"},"); sbuJson.AppendLine("{\"Name\":\"hehe\",\"Age\":\"22\"},"); sbuJson.AppendLine("{\"Name\":\"haha\",\"Age\":\"23\"},"); sbuJson.AppendLine("{\"Name\":\"heihei\",\"Age\":\"24\"},"); sbuJson.AppendLine("{\"Name\":\"gaga\",\"Age\":\"25\"},"); sbuJson.AppendLine("{\"Name\":\"xixi\",\"Age\":\"26\"}"); sbuJson.AppendLine("]}"); context.Response.Write(sbuJson.ToString()); context.Response.End();
这是我的style
<style> table, th, td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(odd) { background-color: #f1f1f1; } table tr:nth-child(even) { background-color: #ffffff; } input.ng-invalid { background-color: lightblue; } </style>
关于AngularJs，数据绑定与自定义验证
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。