angular

最新推荐文章于 2024-05-02 16:26:38 发布

ldzyz007

最新推荐文章于 2024-05-02 16:26:38 发布

阅读量220

点赞数

分类专栏： angular 文章标签： angular

本文链接：https://blog.csdn.net/ldzyz007/article/details/84907098

版权

angular 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

http://blog.csdn.net/yy374864125/article/details/41349417

http://download.csdn.net/detail/hcl1687/4908324

http://blog.csdn.net/binyao02123202/article/details/9279951

http://www.cnblogs.com/liuju150/p/4631463.html

<!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>

</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
http://ask.csdn.net/questions/171441
http://www.oschina.net/news/60230/angularjs-2-0-website
https://angular.io/download/