AngularJS访问服务器获取数据遍历生成表格，附Demo源码

来源：互联网发布：ppt数据图表编辑：程序博客网时间：2024/06/05 03:11

http://blog.csdn.net/sinat_28147421/article/details/52496185

初学angular.js，觉得真是一个强大的前端框架，可结合BootStrap，下面的代码看起来还是挺多，但是除去BootStrap布局代码的话，会精简很多，才学了几天，目前只可以实现排序、筛选、弹窗、全选、取消全选，备注比较全面，适合初学人员，因为从服务器端获取数据需要附带数据库，太麻烦，我就生成了两个Json文件，命名在app.js里可以看到，StudentInfo.json和ClassInfo.json，另外从服务器端获取数据库资源的连接方式我也写了，仅供新手参考。

前台

[html] view plain copy

<!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>
<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>
<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>
<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>
<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>
<script src="js/app.js" type="text/javascript"></script>
</body>
</html>

后台，angular控制器，app.js

[javascript] view plain copy

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

[javascript] view plain copy

[{"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

[javascript] view plain copy

[{"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