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

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

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

AngularJS访问服务器获取数据遍历生成表格,附Demo源码_第1张图片

AngularJS访问服务器获取数据遍历生成表格,附Demo源码_第2张图片

前台

[html] view plain copy
  1. >  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.   
  4.   
  5.     <head>  
  6.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  7.         <title>Angular.js数据绑定title>  
  8.         <script src="js/angular.js" type="text/javascript">script>  
  9.         <script src="js/jquery.min.js" type="text/javascript">script>  
  10.         <script src="js/bootstrap.js" type="text/javascript">script>  
  11.         <link href="css/bootstrap.css" rel="stylesheet" />  
  12.         <style type="text/css">  
  13.             th,td {  
  14.                 text-align: center;  
  15.             }  
  16.         style>  
  17.     head>  
  18.       
  19.   
  20.   
  21.     <body ng-app="myApp" ng-controller="customersCtrl">  
  22.           
  23.         <div class="nav navbar-inverse">  
  24.             <div class="navbar-header">  
  25.                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#tt">  
  26.                 <span class="icon-bar">span>  
  27.                 <span class="icon-bar">span>  
  28.                 <span class="icon-bar">span>  
  29.             button>  
  30.                 <img class="navbar-brand" src="img/HBuilder.png">  
  31.             div>  
  32.             <div class="collapse navbar-collapse" id="tt">  
  33.                 <ul class="nav navbar-nav">  
  34.                     <li>  
  35.                         <a href="#">Uchiha Madalaa>  
  36.                     li>  
  37.                     <li>  
  38.                         <a href="#" data-toggle="dropdown">Uchiha Obitoa>  
  39.                         <ul class="dropdown dropdown-menu">  
  40.                             <li>  
  41.                                 <a href="#">Uchiha Sasukea>  
  42.                             li>  
  43.                             <li>  
  44.                                 <a href="#">Uchiha Sasukea>  
  45.                             li>  
  46.                             <li>  
  47.                                 <a href="#">Uchiha Sasukea>  
  48.                             li>  
  49.                         ul>  
  50.                     li>  
  51.                     <li>  
  52.                         <a href="#">Uchiha Sasukea>  
  53.                     li>  
  54.                     <li>  
  55.                         <a href="#">Uchiha Itachia>  
  56.                     li>  
  57.                 ul>  
  58.             div>  
  59.         div>  
  60.           
  61.           
  62.         <div class="container-fluid">  
  63.             <div class="row">  
  64.                 <div class="col-md-12">  
  65.                       
  66.                     <div class="panel panel-primary">  
  67.                           
  68.                         <div class="panel-heading">  
  69.                             AngularJS数据绑定  
  70.                         div>  
  71.                           
  72.                         <div class="panel-body">  
  73.                               
  74.                             <div class="input-group col-md-2 pull-right">  
  75.                                 <input type="text" placeholder="请输入要搜索的关键字" class="form-control" ng-model="id" />  
  76.                                 <div class="input-group-btn">  
  77.                                     <button type="button" class="btn btn-info">  
  78.                                     搜索  
  79.                                     <span class="glyphicon glyphicon-search">span>  
  80.                                 button>  
  81.                                 div>  
  82.                             div>  
  83.                               
  84.                               
  85.                             <div class="btn-group pull-right">  
  86.                                 <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">  
  87.                                 <span class=" glyphicon glyphicon-plus">  
  88.                                 span>  
  89.                                 添加  
  90.                             button>  
  91.                                 <button type="button" class="btn btn-primary" ng-click="deleteStu(x)">  
  92.                                 <span class="glyphicon glyphicon-remove">span>  
  93.                                 删除  
  94.                             button>  
  95.                                 <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#myModal" ng-click="editStu(x)">  
  96.                                 <span class="glyphicon glyphicon-edit">span> 编辑  
  97.                             button>  
  98.                             div>  
  99.                               
  100.                               
  101.                             <table id="tb" class="table table-striped table-bordered table-hover table-responsive">  
  102.                                 <tr>  
  103.                                       
  104.                                     <th><input type="checkbox" id="ck_all" ng-model="selectAll" />th>  
  105.                                     <th>序号th>  
  106.                                     <th ng-click="col='stid';desc=!desc">学号<span class="caret">span>th>  
  107.                                     <th ng-click="col='Name';desc=!desc">姓名<span class="caret">span>th>  
  108.                                     <th ng-click="col='major';desc=!desc">专业<span class="caret">span>th>  
  109.                                     <th ng-click="col='Age';desc=!desc">年龄<span class="caret">span>th>  
  110.                                     <th ng-click="col='Address';desc=!desc">地址<span class="caret">span>th>  
  111.                                     <th>备注th>  
  112.                                       
  113.                                 <tr ng-repeat="x in names | filter: id | orderBy:col:desc">  
  114.                                     <td><input type="checkbox" name="cbx" value="{{x.stid}}" ng-click="isSelected(x)" ng-checked="selectAll" />td>  
  115.                                     <td>{{$index+1}}td>  
  116.                                     <td>{{x.stid}}td>  
  117.                                     <td>{{x.Name}}td>  
  118.                                     <td>{{x.major}}td>  
  119.                                     <td>{{x.Age}}td>  
  120.                                     <td>{{x.Address}}td>  
  121.                                     <td>{{x.remark}}td>  
  122.                                       
  123.                         div>  
  124.                           
  125.                           
  126.                         <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">  
  127.                             <div class="modal-dialog" role="document">  
  128.                                 <div class="modal-content">  
  129.                                     <div class="modal-body">  
  130.                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×span>button>  
  131.                                         <form class="col-md-12">  
  132.                                             <span class="help-block col-md-2">序号span>  
  133.                                             <div class="form-group col-md-10">  
  134.                                                 <input type="text" class="form-control" ng-model="currentStu.stid" />  
  135.                                             div>  
  136.                                             <span class="help-block col-md-2">姓名span>  
  137.                                             <div class="form-group col-md-10">  
  138.                                                 <input type="text" class="form-control" ng-model="currentStu.Name" />  
  139.                                             div>  
  140.                                             <span class="help-block col-md-2">专业span>  
  141.                                             <div class="form-group col-md-10" ng-controller="classCtrl">  
  142.                                                 <select name="sel" class="form-control">  
  143.                                                     <option ng-repeat="c in datas" ng-model="currentStu.Name" value="{{c.cid}}">{{c.Major}}option>  
  144.                                                 select>  
  145.                                             div>  
  146.                                             <span class="help-block col-md-2">年龄span>  
  147.                                             <div class="form-group col-md-10">  
  148.                                                 <input type="text" class="form-control" ng-model="currentStu.Age" />  
  149.                                             div>  
  150.                                             <span class="help-block col-md-2">地址span>  
  151.                                             <div class="form-group col-md-10">  
  152.                                                 <input type="text" class="form-control" ng-model="currentStu.Address" />  
  153.                                             div>  
  154.   
  155.   
  156.                                             <span class="help-block col-md-2">备注span>  
  157.                                             <div class="form-group col-md-10">  
  158.                                                 <input type="text" class="form-control" ng-model="currentStu.remark" />  
  159.                                             div>  
  160.                                         form>  
  161.                                         <button type="button" class="btn btn-info" data-dismiss="modal">  
  162.                                         取消  
  163.                                         <span class="glyphicon glyphicon-share-alt">span>  
  164.                                     button>  
  165.                                         <button type="button" class="btn btn-primary">  
  166.                                         <span class="glyphicon glyphicon-saved" ng-click="addStu(currentStu)">span>保存  
  167.                                     button>  
  168.                                     div>  
  169.                                 div>  
  170.                             div>  
  171.                         div>  
  172.                           
  173.                     div>  
  174.                       
  175.                 div>  
  176.             div>  
  177.         div>  
  178.           
  179.           
  180.         <script src="js/app.js" type="text/javascript">script>  
  181.     body>  
  182. html>  

后台,angular控制器,app.js

[javascript] view plain copy
  1. var app = angular.module('myApp', []);  
  2. app.controller('customersCtrl'function ($scope, $http) {  
  3.     //次出你也可以从服务器端获取,由于本人学的是C#语言,用一般处理程序做后台,所以在这里提供一种方式,其他语言请自己解决-_—  
  4.     //建议一定这样写,不要用$http.post('DataSource.ashx',{'data':'all'}),否则后台request["data]获取不到参数,我也不知道为什么  
  5. //  $http({  
  6. //      method: 'POST',  
  7. //      url: 'DataSorce.ashx',  
  8. //      params: {  
  9. //          'data': 'all'  
  10. //      }  
  11. //  })  
  12.     $http.get('js/StudentInfo.json')  
  13.     .success(function (Data) {  
  14.         $scope.names = Data;  
  15.         console.info(Data);  
  16.     });  
  17.     //创建当前正在编辑的对象  
  18.     $scope.currentStu = {};  
  19.     $scope.x = $scope.names;  
  20.     $scope.researchStu = function (x) {  
  21.         $scope.research = x;  
  22.     };  
  23.     $scope.deleteStu = function (x) {  
  24.         $scope.x.splice($scope.names.indexOf(x), 1);  
  25.     };  
  26.     $scope.addStu = function (x) {  
  27.         $scope.stu.push(x);  
  28.     };  
  29.     $scope.isSelected = function (currentrow) {  
  30.         console.info(currentrow);  
  31.         return currentrow;  
  32.     }  
  33.     $scope.editStu = function () {  
  34.         var now = $scope.isSelected();  
  35.         console.info(now);  
  36.     };  
  37. });  
  38. app.controller('classCtrl'function ($scope, $http) {  
  39.     $http.get('js/ClassInfo.json')  
  40.     .success(function (Source) {  
  41.         $scope.datas = Source;  
  42.         console.info(Source);  
  43.     });  
  44. });  
json文件
1.StudentInfo.json
[javascript] view plain copy
  1. [{"stid":1001,"Name":"陈鹏","Age":21,"Address":"湖北十堰","remark":"我在杭州上班","major":"物联网智能交通"},  
  2. {"stid":1002,"Name":"张宗权","Age":22,"Address":"陕西西安","remark":"我在武汉读书","major":"物联网智能交通"},  
  3. {"stid":1003,"Name":"程杰","Age":20,"Address":"湖北十堰","remark":"我在汽院读书","major":"通信工程师"},  
  4. {"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":"微电子"},  
  5. {"stid":1007,"Name":"宇智波佐助","Age":15,"Address":"木叶村","remark":"我是宇智波唯一后人","major":"IOS开发工程师"},  
  6. {"stid":1008,"Name":"宇智波带土","Age":21,"Address":"木叶村","remark":"我喜欢琳","major":"通信工程师"},  
  7. {"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
  1. [{"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":"微电子"}]  

你可能感兴趣的:(AngularJs)