首先是html页面的编写：
<!doctype html><html ng-app="myModule">
<head>
<meta charset="utf-8">
<title>学生信息管理</title>
//需要用到的一些库，要加载的
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/ng-table/dist/ng-table.js"></script>
<script src="bower_components/ng-table-export/ng-table-export.js"></script>
<link rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" >
<script src="module/scripts/controllers/Form.js"></script>
</head>
<body>
<div ui-view></div>
<div ng-controller="FormController">
<h3>学生信息列表</h3>
<br>
<div>
搜索：<input type="text" ng-model="titleFilter" placeholder="输入关键字"> //加上<tr ng-repeat="student in students|filter:titleFilter">实现了表格内容的检索。
</div>
<br>
<table ng-table="tableParams" >
<tr ng-repeat="student in students|filter:titleFilter"> //遍历每一个对象
<td title="'Name'">
<span ng-if="!student.$edit">{{student.Name}}</span>
<div ng-if="student.$edit"><input type="text" ng-model="student.Name"></div>
</td>
<td title="'Id'">
<span ng-if="!student.$edit">{{student.Id}}</span>
<div ng-if="student.$edit"><input type="text" ng-model="student.Id"></div>
</td>
<td title="'Grade'">
<span ng-if="!student.$edit">{{student.Grade}}</span>
<div ng-if="student.$edit"><input type="text" ng-model="student.Grade"></div>
</td>
<td title="'Actions'" width="200">
<a ng-if="!student.$edit" ng-click="student.$edit=true">Edit</a>
<a ng-if="student.$edit" ng-click="student.$edit=false">Save</a>
<a ng-click="deleteStudent(obj)" ng-if="student.$edit" >Delete</a>
<!-- <a ng-click="addStudent()" ng-if="student.$edit" >Add</a> -->
</td>
</tr>
</table>
<div>
<input type="text" ng-model="newName" placeholder="input Name" required/>
<input type="text" ng-model="newId" placeholder="input Id" required/>
<input type="text" ng-model="newGrade" placeholder="input Grade" required/>
<input type="button" ng-click="addStudent()" value="Add" />
</div>
</div>
</body>
</html> 接下来是js代码部分 var myModule=angular.module('myModule',['ngTable']).
controller('FormController',function($scope,ngTableParams,$sce){
$scope.students=[
{Name:'小李',Id:'201401201',Grade:'计算机技术'},
{Name:'李磊',Id:'201401202',Grade:'计算机技术'},
{Name:'夏津',Id:'201401203',Grade:'计算机技术'},
{Name:'杭州',Id:'201401204',Grade:'计算机技术'}
]
$scope.addStudent=function(){ //添加学生函数
$scope.students.push({Name:$scope.newName,Id:$scope.newId,Grade:$scope.newGrade})
$scope.newName=''
$scope.newId=''
$scope.newGrade=''
}
$scope.deleteStudent=function(student){ //删除一行的内容
$scope.students.splice($scope.students.indexOf(student),1)
}
})
angular框架继承了jQuery，可以使用JQuery方式修改，如$('div').attribute('data-key', 'new-value')另一种办法就是使用动态数据咯，如<div data-key="{parameterName}">，当parameterName的值改变时data-key属性自动就更新了，例$scope.parameterName='new value'
使用Jquery结合AngulraJs使用的时候，在render完table后，执行一段js脚本，把JqTable应用到该table上，能够捕获到AngularJs渲染完成页面的事件。\x0d\x0a要达到这个目的，需要为当前的app自定义directive:\x0d\x0aapp.directive('onFinishRenderFilters', function ($timeout) {\x0d\x0areturn {\x0d\x0arestrict: 'A',\x0d\x0alink: function(scope, element, attr) {\x0d\x0aif (scope.$last === true) {\x0d\x0a$timeout(function() {\x0d\x0ascope.$emit('ngRepeatFinished')\x0d\x0a})\x0d\x0a}\x0d\x0a}\x0d\x0a}\x0d\x0a})\x0d\x0a然后，在需要监控的地方，加上该directive:\x0d\x0a微信
微博
QQ空间
答案纠错
举报
取消 赞赏答主 5 10 50 100 200已赞赏0财富值
合计：0 财富值
登录后赞赏 选择举报类型 侵犯版权 色情低俗 涉嫌违法犯罪 时政信息不实 垃圾广告 低质灌水 工作人员会在48小时内处理,处理结果请关注系统通知,感谢您对百度知道的支持。 确定 返回答题 void function(a,b,c,d,e,f){function g(b){a.attachEvent?a.attachEvent("onload",b,!1):a.addEventListener&&a.addEventListener("load",b)}function h(a,c,d){d=d||15var e=new Datee.setTime((new Date).getTime()+1e3*d),b.cookie=a+"="+escape(c)+"path=/expires="+e.toGMTString()}function i(a){var c=b.cookie.match(new RegExp("(^| )"+a+"=([^]*)(|$)"))return null!=c?unescape(c[2]):null}function j(){var a=i("PMS_JT")if(a){h("PMS_JT","",-1)try{a=a.match(/{["']s["']:(\d+),["']r["']:["']([\s\S]+)["']}/),a=a&&a[1]&&a[2]?{s:parseInt(a[1]),r:a[2]}:{}}catch(c){a={}}a.r&&b.referrer.replace(/#.*/,"")!=a.r||alog("speed.set","wt",a.s)}}if(a.alogObjectConfig){var k=a.alogObjectConfig.sample,l=a.alogObjectConfig.randd="https:"===a.location.protocol?"https://fex.bdstatic.com"+d:"http://fex.bdstatic.com"+d,k&&l&&l>k||(g(function(){alog("speed.set","lt",+new Date),e=b.createElement(c),e.async=!0,e.src=d+"?v="+~(new Date/864e5)+~(new Date/864e5),f=b.getElementsByTagName(c)[0],f.parentNode.insertBefore(e,f)}),j())}}(window,document,"script","/hunter/alog/dp.mobile.min.js") window.tt = 1681148051欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）