angular

程序员文章站 2022-07-12 09:22:48

...

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/

angular

angular.js实现数据双向通信的原理详细介绍

Angular5中状态管理的实现

Angular项目如何升级至Angular6步骤全纪录

Angular使用cli生成自定义文件、组件的方法

Angular动态绑定样式及改变UI框架样式的方法小结

对angular2中的ngfor和ngif指令嵌套实例讲解

angular4中*ngFor不能对返回来的对象进行循环的解决方法

详解Angular6学习笔记之主从组件

Angular6 正则表达式允许输入部分中文字符

angular2组件中定时刷新并清除定时器的实例讲解