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
关键词:JS