（二）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 = "[email protected]";
 8   }
 9
10   $scope.reset();
11 }