首先是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)
}
})
ajax() 方法通过 HTTP 请败粗求加载远程数据。该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接 *** 作该函数，除非你需要 *** 作不常用的选项，以获得更多的灵活性。
最简单的情况下，$.ajax() 可以不带任何参数直接使用。
注意：所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。
语法：
jQuery.ajax([settings])
参数描述：
settings 可选。用于配置 Ajax 请求的键值对集合。可以通过 $.ajaxSetup() 设置任何选项的默认值。
参数：
options
类型：Object
可选。AJAX 请求设置。所有选项都是可选的。
async：
类型：Boolean
默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
注意，同步请求将锁住浏览器，用户其它 *** 作必须等待请求完成才可以执行。
beforeSend(XHR)：
类型：Function
发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。
XMLHttpRequest 对象是唯一的参数。
这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。
cache：
类型：Boolean
默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。
jQuery 1.2 新功能。
complete(XHR, TS)
类型：Function
请求完成后回调函数 (请求成功或失败之后均调用)。
参数： XMLHttpRequest 对象和一个描述请求察锋镇类型的字符串。
这是一个 Ajax 事件。
contentType
类型：String
默认值基汪: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器（即使没有数据要发送）。
context
类型：Object
这个对象用于设置 Ajax 相关回调函数的上下文。也就是说，让回调函数内 this 指向这个对象（如果不设定这个参数，那么 this 就指向调用本次 AJAX 请求时传递的 options 参数）。比如指定一个 DOM 元素作为 context 参数，这样就设置了 success 回调函数的上下文为这个 DOM 元素。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）