（三）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 = "[email protected]";

 8   }

 9   

10   $scope.reset();

11 }