首先是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)
}
})
工具/材料Sublime Text
01打开Sublime Text软件，新建一个目录结构，在目录里面添加angular的js库文件和html文件，如下图所示
02接下来我们在html文件里面通过script标签引入angular的js脚本文件，如下图所示
03然后我们在脚本标签里面实现一个控制器，并且在scope上下文中准备一个列表数据，如下图所示
04接下来需要准备table列表，在table列表里面通过ng-repeat命令遍历准备好的数组，如下图所示
05准备好页面以后，我们运行程序，你就会在页面中看到如下图所示的列表数据，这个数据和你刚才准备时的顺序是一样的
06接下来我们在列表里面通过orderBy命令来对列表进行排序，这里是按年龄排序的，所以在中括号里面要跟上age字段，如下图所示
07最后我们重新运行页面，你就会看到列表里面的数据已经按照年龄从小到大进行排列了，如下图所示
第一步，打开HBuilder开发工具，在指定的Web项目中新建静态页面init.html，并引入Bootstrap和AngularJS相关的文件第二步，在body元素添加ng-controller指令，并在里面添加<table></table>
第三步，在<script></script>里编写AngularJS初始化函数，并声明控制器
第四步，预览该静态页面，在浏览器查看页面效果，显示一个输入框和按钮
第五步，在控制器中添加变量model，这个变量赋值数组
第六步，在表格table循环model变量，遍历该数组并给表格赋值
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）