你的位置:首页 > 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>