(三)Angularjs - 小实例
AngularJS处理数据表格
使用 np-repeat 指令
<table> ... <!-- 这里使用ng-repeat指令来重复数据生成表格 --> <tr ng-repeat="subject in student.subjects"> <td>{{ subject.name }}</td> <td>{{ subject.marks }}</td> </tr> ... </table>
数据对象
1 $scope.student = { 2 firstName: "Terry", 3 lastName: "Lee", 4 fees:500, 5 subjects:[ 6 {name:'编程语言基础',marks:90}, 7 {name:'C语言',marks:85}, 8 {name:'HTML/CSS',marks:61}, 9 {name:'Java',marks:85}, 10 {name:'NodeJS',marks:65} 11 ], 12 fullName: function() { 13 var studentObject; 14 studentObject = $scope.student; 15 return studentObject.firstName + " " + studentObject.lastName; 16 } 17 };
AnguarJS页面HTML元素控制
使用 ng-disabled 指令
<td><input type="checkbox" ng-model="enableDisableButton">禁用右侧按钮</td> <td><button ng-disabled="enableDisableButton">演示按钮</button></td>
说明:
定义一个model,这里为"enableDisableButton",再将model赋予ng-disabled指令,即可生效。
完整代码
<div ng-app="" class="ng-scope"> <table border="0"> <tbody><tr> <th>控制操作</th> <th>演示元素</th> </tr> <tr> <td><input type="checkbox" ng-model="enableDisableButton" class="ng-valid ng-dirty">禁用右侧按钮</td> <td><button ng-disabled="enableDisableButton">演示按钮</button></td> </tr> <tr> <td><input type="checkbox" ng-model="showHide1" class="ng-pristine ng-valid">显示右侧按钮</td> <td><button ng-show="showHide1" class="ng-hide">演示按钮</button></td> </tr> <tr> <td><input type="checkbox" ng-model="showHide2" class="ng-pristine ng-valid">隐藏右侧按钮</td> <td><button ng-hide="showHide2" class="">演示按钮</button></td> </tr> <tr> <td><p class="ng-binding">已点击次数: </p></td> <td><button ng-click="clickCounter = clickCounter + 1">点击计数</button></td> </tr> </tbody></table> </div>
AngularJS的表单数据验证
Angular中可以使用如下方式来实现表单数据验证:
$dirty - 此状态表明数据已修改
$invalid- 此状态表明输入数据非法
$error- 此状态表明具体的验证错误
<div ng-app="" ng-controller="studentController" class="ng-scope"> <form name="studentForm" class="ng-pristine ng-valid ng-valid-required"> <table> <tbody><tr> <td>姓:</td> <td> <input name="lastname" type="text" ng-model="lastName" required="" class="ng-pristine ng-valid ng-valid-required"> <span style="color:red" ng-show="studentForm.lastname.$dirty && studentForm.lastname.$invalid" class="ng-hide"> <span ng-show="studentForm.lastname.$error.required" class="ng-hide">必须填写姓</span> </span> </td> </tr> <tr> <td>名:</td> <td> <input name="firstname" type="text" ng-model="firstName" required="" class="ng-pristine ng-valid ng-valid-required"> <span style="color:red" ng-show="studentForm.firstname.$dirty && studentForm.firstname.$invalid" class="ng-hide"> <span ng-show="studentForm.firstname.$error.required" class="ng-hide">必须填写名</span> </span> </td> </tr> <tr> <td>邮件:</td> <td> <input name="email" type="email" ng-model="email" length="100" required="" class="ng-pristine ng-valid-email ng-valid ng-valid-required"> <span style="color:red" ng-show="studentForm.email.$dirty && studentForm.email.$invalid" class="ng-hide"> <span ng-show="studentForm.email.$error.required" class="ng-hide">必须填写邮件</span> <span ng-show="studentForm.email.$error.email" class="ng-hide">邮件格式错误</span> </span> </td> </tr> <tr> <td> <button ng-click="reset()">重置表单</button> </td> <td> <button ng-disabled="studentForm.firstname.$dirty && studentForm.firstname.$invalid || studentForm.lastname.$dirty && studentForm.lastname.$invalid || studentForm.email.$dirty && studentForm.email.$invalid" ng-click="submit()">递交表单</button> </td> </tr> </tbody></table> </form> </div>
1 function studentController($scope) { 2 3 //调用reset将表单输入框对应值设置为如下缺省值 4 $scope.reset = function(){ 5 $scope.firstName = "terry"; 6 $scope.lastName = "lee"; 7 $scope.email = "terrylee@gbtags.com"; 8 } 9 10 $scope.reset(); 11 }