http://blog.csdn.net/sinat_28147421/article/details/52496185
初学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);
- });
- });
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":"电子商务"}]
- [{"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":"微电子"}]