angular-CFANZ编程社区

http://www.iteye.com/news/28651-AngularJS-Google-resource

<!DOCTYPE html> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 

 <title>Angular</title> 

 <script src="resources/js/angular.min.js"></script> 

 <script type="text/javascript"> 

 (function () { 

 //申明Module 

 var mainModule = angular.module("MainApp", []); 

 //创建Order的增删改查Angular服务 

 mainModule.service("Order", ["$rootScope", "$http", function ($rootScope, $http) { 

 //page:当前页码 

 //filter：查询条件 

 var service = { orders: [], page: 1, filter: "" }; 

 //根据页码，查询条件，拿到当前的Orders集合 

 service.getOrders = function () { 

 //OData可以通过odata/Orders?$skip=分页跳过的记录数&$filter=查询条件 

 //通过这样的GET请求，可以拿到当前查询条件下的第几页数据 

 $http.get("odata/Orders?$skip=" + ((this.page - 1) * 3).toString() + this.filter) 

 .success(function (data, status, headers, config) { 

 service.orders = data.value; 

 //setvice.nextLink = data["@odata.nextLink"]; 

 $rootScope.$broadcast('orders.update'); 

 }) 

 .error(function (data, status, headers, config) { }); 

 }; 

 //增加Order,传入Order对象Post到odata/Orders 

 service.addOrder = function (order) { 

 $http.post("odata/Orders", order) 

 .success(function (data, status, headers, config) { 

 service.orders.push(data); 

 }) 

 .error(function (data, status, headers, config) { }); 

 }; 

 //删除Order,用Delete请求odata/Orders(id) 

 service.deleteOrder = function (id) { 

 $http.delete("odata/Orders(" + id + ")") 

 .success(function (data, status, headers, config) { 

 service.getOrders(); 

 }) 

 .error(function (data, status, headers, config) { }); 

 }; 

 //修改一个Order,用PUT请求odata/Orders(id),传入修改后的Order 

 service.putOrder = function (order) { 

 $http.put("odata/Orders(" + order.Id + ")", order) 

 .success(function (data, status, headers, config) { 

 service.getOrders(); 

 }) 

 .error(function (data, status, headers, config) { }); 

 }; 

 return service; 

 }]); 

 //申明Order Controller,注入Order服务 

 mainModule.controller("orderList", ["$scope", "Order", function ($scope, Order) { 

 $scope.$on("orders.update", function (event) { 

 $scope.orders = Order.orders; 

 }) 

 //增加的order对象 

 $scope.order = {}; 

 //修改的order对象 

 $scope.uOrder = {}; 

 //对列表进行查询的对象 

 $scope.whereOrder = {}; 

 //上一页 

 $scope.goBefore = function () { 

 if (Order.page > 1) { 

 Order.page -= 1; 

 Order.filter = $scope.getFilterString(); 

 Order.getOrders(); 

 } 

 } 

 //下一页 

 $scope.goNext = function () { 

 Order.page += 1; 

 Order.filter = $scope.getFilterString(); 

 Order.getOrders(); 

 } 

 //得到根据查询条件拿到Order 

 $scope.getOrders = function () { 

 Order.filter = $scope.getFilterString(); 

 Order.getOrders(); 

 } 

 //生成查询条件字符串 

 $scope.getFilterString = function () { 

 var filterString = "&$filter="; 

 var filterArray = []; 

 if ($scope.whereOrder.No != undefined && $scope.whereOrder.No!="") filterArray.push("No eq '" + $scope.whereOrder.No + "'"); 

 if ($scope.whereOrder.geTotal != undefined && $scope.whereOrder.geTotal.toString() != "") filterArray.push("Total ge " + $scope.whereOrder.geTotal); 

 if ($scope.whereOrder.leTotal != undefined && $scope.whereOrder.leTotal.toString() != "") filterArray.push("Total le " + $scope.whereOrder.leTotal); 

 filterString += filterArray.join(" and "); 

 if (filterString == "&$filter=") filterString = ""; 

 console.log(filterString); 

 return filterString; 

 } 

 //增加Order，调用上面的Order Service 

 $scope.addOrder = function () { 

 Order.addOrder($scope.order); 

 } 

 //删除order，调用上面的Order Service 

 $scope.deleteOrder = function (id) { 

 Order.deleteOrder(id); 

 } 

 //修改order 

 $scope.editOrder = function (order) { 

 $scope.uOrder = order; 

 } 

 //把修改的Order更新到服务器，调用上面的Order Service 

 $scope.putOrder = function () { 

 Order.putOrder($scope.uOrder) 

 } 

 Order.getOrders(); 

 $scope.page = Order.page; 

 $scope.orders = Order.orders; 

 }]); 

 })(); 

 </script> 

</head> 

<body ng-app="MainApp"> 

 <div ng-controller="orderList"> 

 <fieldset> 

 <legend>List Orders</legend> 

 <div> 

 <span>查询条件</span><br /> 

 No:<input type="text" ng-model="whereOrder.No" /><br /> 

 Total:<input type="number" ng-model="whereOrder.geTotal" /> 

 <input type="number" ng-model="whereOrder.leTotal" /><br /> 

 <input type="button" value="Search" ng-click="getOrders()" /> 

 </div> 

 <table border="1"> 

 <thead> 

 <tr> 

 <th>ID</th> 

 <th>No</th> 

 <th>Total</th> 

 <th>Date</th> 

 <th colspan="2">Action</th> 

 </tr> 

 </thead> 

 <tbody> 

 <tr ng-repeat="item in orders"> 

 <td>{{item.Id}}</td> 

 <td>{{item.No}}</td> 

 <td>{{item.Total}}</td> 

 <td>{{item.Date | date : 'yyyy-MM-dd'}}</td> 

 <td><a href="#nogo" ng-click="editOrder(item)">Edit</a></td> 

 <td><a href="#nogo" ng-click="deleteOrder(item.Id)">Delete</a></td> 

 </tr> 

 </tbody> 

 </table> 

 <div> 

 <input type="button" ng-click="goBefore()" value="上一页" /> 

 <input type="button" ng-disabled="orders.length<3" ng-click="goNext()" value="下一页" /> 

 </div> 

 </fieldset> 

 <fieldset> 

 <legend>Add Order</legend> 

 <div> 

 <span>No:</span><input type="text" ng-model="order.No" /><br /> 

 <span>Total:</span><input type="number" ng-model="order.Total" /><br /> 

 <span>Date:</span><input type="date" ng-model="order.Date" /><br /> 

 <input type="button" ng-click="addOrder()" value="Add Order" /> 

 </div> 

 </fieldset> 

 <fieldset> 

 <legend>Update Order</legend> 

 <div> 

 <input type="hidden" ng-model="uOrder.Id" /> 

 <span>No:</span><input type="text" ng-model="uOrder.No" /><br /> 

 <span>Total:</span><input type="number" ng-model="uOrder.Total" /><br /> 

 <span>Date:</span><input type="date" ng-model="uOrder.Date" /><br /> 

 <input type="button" ng-click="putOrder()" value="Update Order" /> 

 </div> 

 </fieldset> 

 </div> 

</body> 

</html>

1）首先是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" href="bower_components/ng-table/dist/ng-table.css"/> 

<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-3.3.2-dist/css/bootstrap.min.css"/> 

<link rel="stylesheet" type="text/css" href="module/styles/form.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" class="table table-bordered"> 

<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 class="form-control" 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 class="form-control" 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 class="form-control" type="text" ng-model="student.Grade"></div> 

</td> 

<td title="'Actions"" width="200"> 

<a href="" ng-if="!student.$edit" class="btn btn-default btn-xs" ng-click="student.$edit=true">Edit</a> 

<a href="" ng-if="student.$edit" class="btn btn-default btn-xs" ng-click="student.$edit=false">Save</a> 

<a ng-click="deleteStudent(obj)" ng-if="student.$edit" class="btn btn-default btn-xs" >Delete</a> 

<!-- <a href="" ng-click="addStudent()" ng-if="student.$edit" class="btn btn-default btn-xs">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" class="btn"/> 

</div> 

</div> 

</body> 

</html>

（2）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); 

}; 

});

（3）测试发现上面的方法删除的都是最后一行的内容，接下来改动一点使得可以删除选定行，并且对其加以序列号：

deleteStudent（）函数： 


　　$scope.deleteStudent=function(index){ //删除选中的一行 

$scope.students.splice(index,1); 

};

在HTML页面中也需要改动一点：<a ng-click="deleteStudent($index)" ng-if="student.$edit" class="btn btn-default btn-xs" >Delete</a>

即在deleteStudent（）中传入当前行的索引index。

http://damoqiongqiu.iteye.com/blog/1920993
http://www.angularjs.cn/A175
http://www.grobmeier.de/angular-js-ng-select-and-ng-options-21112012.html

https://angular.io/download/