你的位置:首页 > Java教程

[Java教程](二)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 &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; studentForm.firstname.$invalid ||studentForm.lastname.$dirty &amp;&amp; studentForm.lastname.$invalid ||studentForm.email.$dirty &amp;&amp; studentForm.email.$invalid" ng-click="submit()">递交表单</button>    </td>   </tr>  </tbody></table> </form></div>

View Code

 

 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 }