AngularJS访问服务器获取数据遍历生成表格，附Demo源码
来源：互联网 发布：前段性能优化的方法 编辑：程序博客网 时间：2024/05/16 05:53
初学angular.js，觉得真是一个强大的前端框架，可结合BootStrap，下面的代码看起来还是挺多，但是除去BootStrap布局代码的话，会精简很多，才学了几天，目前只可以实现排序、筛选、弹窗、全选、取消全选，备注比较全面，适合初学人员，因为从服务器端获取数据需要附带数据库，太麻烦，我就生成了两个Json文件，命名在app.js里可以看到，StudentInfo.json和ClassInfo.json，另外从服务器端获取数据库资源的连接方式我也写了，仅供新手参考。
前台
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Angular.js数据绑定</title><script src="js/angular.js" type="text/javascript"></script><script src="js/jquery.min.js" type="text/javascript"></script><script src="js/bootstrap.js" type="text/javascript"></script><link href="css/bootstrap.css" rel="stylesheet" /><style type="text/css">th,td {text-align: center;}</style></head><!--设置ng-app和controller--><body ng-app="myApp" ng-controller="customersCtrl"><!--导航条开始--><div class="nav navbar-inverse"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#tt"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button><img class="navbar-brand" src="img/HBuilder.png"></div><div class="collapse navbar-collapse" id="tt"><ul class="nav navbar-nav"><li><a href="#">Uchiha Madala</a></li><li><a href="#" data-toggle="dropdown">Uchiha Obito</a><ul class="dropdown dropdown-menu"><li><a href="#">Uchiha Sasuke</a></li><li><a href="#">Uchiha Sasuke</a></li><li><a href="#">Uchiha Sasuke</a></li></ul></li><li><a href="#">Uchiha Sasuke</a></li><li><a href="#">Uchiha Itachi</a></li></ul></div></div><!--导航条结束--><!--沾满全屏container容器--><div class="container-fluid"><div class="row"><div class="col-md-12"><!--面板开始--><div class="panel panel-primary"><!--面板标题/头部--><div class="panel-heading">AngularJS数据绑定</div><!--面板内容开始--><div class="panel-body"><!--搜索工具栏开始--><div class="input-group col-md-2 pull-right"><input type="text" placeholder="请输入要搜索的关键字" class="form-control" ng-model="id" /><div class="input-group-btn"><button type="button" class="btn btn-info"> 搜索 <span class="glyphicon glyphicon-search"></span> </button></div></div><!--搜索工具栏结束--><!--按钮工具栏开始--><div class="btn-group pull-right"><button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal"> <span class=" glyphicon glyphicon-plus"> </span> 添加 </button><button type="button" class="btn btn-primary" ng-click="deleteStu(x)"> <span class="glyphicon glyphicon-remove"></span> 删除 </button><button type="button" class="btn btn-warning" data-toggle="modal" data-target="#myModal" ng-click="editStu(x)"> <span class="glyphicon glyphicon-edit"></span> 编辑 </button></div><!--按钮工具栏结束--><!--绑定表格开始--><table id="tb" class="table table-striped table-bordered table-hover table-responsive"><tr><!--表头，这只排序字段，--><th><input type="checkbox" id="ck_all" ng-model="selectAll" /></th><th>序号</th><th ng-click="col='stid';desc=!desc">学号<span class="caret"></span></th><th ng-click="col='Name';desc=!desc">姓名<span class="caret"></span></th><th ng-click="col='major';desc=!desc">专业<span class="caret"></span></th><th ng-click="col='Age';desc=!desc">年龄<span class="caret"></span></th><th ng-click="col='Address';desc=!desc">地址<span class="caret"></span></th><th>备注</th><!--<th>编辑</th> <th>删除</th>--></tr><!--重复项开始，设置排序字段，数据源，names代表数据源，x表示names中遍历的每一个对象，id表示模糊搜索输入的内容，要与输入的input的ng-model一致，col表示排序名称，要与表头中一致--><tr ng-repeat="x in names | filter: id | orderBy:col:desc"><td><input type="checkbox" name="cbx" value="{{x.stid}}" ng-click="isSelected(x)" ng-checked="selectAll" /></td><td>{{$index+1}}</td><td>{{x.stid}}</td><td>{{x.Name}}</td><td>{{x.major}}</td><td>{{x.Age}}</td><td>{{x.Address}}</td><td>{{x.remark}}</td><!--<td> <button class="btn btn-default btn-sm" ng-click="editStu(x)" data-toggle="modal" data-target="#myModal">编辑</button> <td> <button class="btn btn-default btn-sm" ng-click="deleteStu(x)">删除</button> </td>--></tr></table><!--绑定表格结束--></div><!--面板内容开始--><!-- Modal弹框内容 --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-body"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><form class="col-md-12"><span class="help-block col-md-2">序号</span><div class="form-group col-md-10"><input type="text" class="form-control" ng-model="currentStu.stid" /></div><span class="help-block col-md-2">姓名</span><div class="form-group col-md-10"><input type="text" class="form-control" ng-model="currentStu.Name" /></div><span class="help-block col-md-2">专业</span><div class="form-group col-md-10" ng-controller="classCtrl"><select name="sel" class="form-control"><option ng-repeat="c in datas" ng-model="currentStu.Name" value="{{c.cid}}">{{c.Major}}</option></select></div><span class="help-block col-md-2">年龄</span><div class="form-group col-md-10"><input type="text" class="form-control" ng-model="currentStu.Age" /></div><span class="help-block col-md-2">地址</span><div class="form-group col-md-10"><input type="text" class="form-control" ng-model="currentStu.Address" /></div><span class="help-block col-md-2">备注</span><div class="form-group col-md-10"><input type="text" class="form-control" ng-model="currentStu.remark" /></div></form><button type="button" class="btn btn-info" data-dismiss="modal"> 取消 <span class="glyphicon glyphicon-share-alt"></span> </button><button type="button" class="btn btn-primary"> <span class="glyphicon glyphicon-saved" ng-click="addStu(currentStu)"></span>保存 </button></div></div></div></div><!--模态框弹窗--></div><!--面板结束--></div></div></div><!--占满全屏container容器--><!--引用AngularJS的controller文件--><script src="js/app.js" type="text/javascript"></script></body></html>后台，angular控制器，app.js
var app = angular.module('myApp', []);app.controller('customersCtrl', function ($scope, $http) {//次出你也可以从服务器端获取，由于本人学的是C#语言，用一般处理程序做后台，所以在这里提供一种方式，其他语言请自己解决-_—//建议一定这样写，不要用$http.post('DataSource.ashx',{'data':'all'}),否则后台request["data]获取不到参数，我也不知道为什么//$http({// method: 'POST',// url: 'DataSorce.ashx',// params: {// 'data': 'all'// }// }) $http.get('js/StudentInfo.json') .success(function (Data) { $scope.names = Data; console.info(Data); }); //创建当前正在编辑的对象 $scope.currentStu = {}; $scope.x = $scope.names; $scope.researchStu = function (x) { $scope.research = x; }; $scope.deleteStu = function (x) { $scope.x.splice($scope.names.indexOf(x), 1); }; $scope.addStu = function (x) { $scope.stu.push(x); }; $scope.isSelected = function (currentrow) { console.info(currentrow); return currentrow; } $scope.editStu = function () { var now = $scope.isSelected(); console.info(now); };});app.controller('classCtrl', function ($scope, $http) { $http.get('js/ClassInfo.json') .success(function (Source) { $scope.datas = Source; console.info(Source); });});json文件1.StudentInfo.json
[{"stid":1001,"Name":"陈鹏","Age":21,"Address":"湖北十堰","remark":"我在杭州上班","major":"物联网智能交通"},{"stid":1002,"Name":"张宗权","Age":22,"Address":"陕西西安","remark":"我在武汉读书","major":"物联网智能交通"},{"stid":1003,"Name":"程杰","Age":20,"Address":"湖北十堰","remark":"我在汽院读书","major":"通信工程师"},{"stid":1004,"Name":"李楠","Age":33,"Address":"广东珠海","remark":"我在魅族上班","major":"高级软件工程师"},{"stid":1005,"Name":"黄章","Age":44,"Address":"广东珠海","remark":"我是魅族老板","major":"Android工程师"},{"stid":1006,"Name":"宇智波鼬","Age":19,"Address":"木叶村","remark":"我有天照","major":"微电子"},{"stid":1007,"Name":"宇智波佐助","Age":15,"Address":"木叶村","remark":"我是宇智波唯一后人","major":"IOS开发工程师"},{"stid":1008,"Name":"宇智波带土","Age":21,"Address":"木叶村","remark":"我喜欢琳","major":"通信工程师"},{"stid":1009,"Name":"宇智波斑","Age":44,"Address":"木叶村","remark":"我和千手柱间是朋友","major":"楼宇智能化"},{"stid":1010,"Name":"千手柱间","Age":44,"Address":"木叶村","remark":"我是木叶村村长，初代火影","major":"Android工程师"},{"stid":1011,"Name":"迪达拉","Age":16,"Address":"岩隐村","remark":"两天秤大野木的徒弟，爆炸就是艺术。","major":"电子商务"}]2.ClassInfo.json[{"cid":14451,"Major":"物联网智能交通"},{"cid":14452,"Major":"高级软件工程师"},{"cid":14453,"Major":"通信工程师"},{"cid":14454,"Major":"Java工程师"},{"cid":14455,"Major":"Android工程师"},{"cid":14456,"Major":"IOS开发工程师"},{"cid":14457,"Major":"楼宇智能化"},{"cid":14458,"Major":"电子商务"},{"cid":14459,"Major":"微电子"}] 0 0
- AngularJS访问服务器获取数据遍历生成表格，附Demo源码
- AngularJS访问服务器获取数据遍历生成表格，附Demo源码
- js遍历获取表格内数据方法
- Android 二维码 生成和识别（附Demo源码）
- Android 二维码 生成和识别（附Demo源码）
- Android 二维码 生成和识别（附Demo源码）
- Android 二维码 生成和识别（附Demo源码）
- Android 二维码 生成和识别（附Demo源码）
- Android 二维码 生成和识别（附Demo源码）
- Android 二维码 生成和识别（附Demo源码）
- Android 二维码 生成和识别（附Demo源码）
- Android：二维码 生成和识别（附Demo源码）
- Android 二维码 生成和识别（附Demo源码）
- 二维码生成以及识别（附Demo源码）
- Android 二维码 生成和识别（附Demo源码）
- Android 二维码 生成和识别（附Demo源码）
- Android 二维码 生成和识别（附Demo源码）
- zz:Android 二维码 生成和识别（附Demo源码）
- Android获取设备唯一标识完美解决方案
- AbstractQueuedSynchronizer的介绍和原理分析
- UIWebView详解
- Debian 支持蓝牙音响
- 如何在linux下检测内存泄漏
- AngularJS访问服务器获取数据遍历生成表格，附Demo源码
- 微服务架构设计 第二步: 分析微服务的边界上下文 (Bounded Context)
- Mysql修改最大连接
- JavaScript防http劫持与XSS
- java中三种常见内存溢出错误的处理方法
- 访谈云云：一个90后萌妹子选择SEO的初衷揭秘
- java工程师面试题之基础面试题
- MySQL使用索引的场景及真正利用索引的SQL类型
- eclipse安装
