（三）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>

 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 }