html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>angularjs</title>
- <link rel="stylesheet" href="http://cdn.bootCSS.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css">
- </head>
- <body ng-app="tableApp" ng-controller="tableCtrl">
- <div class="container">
- <!-- table 数据展示, 添加, 删除, 筛选, 查看详情信息, 排序 -->
- <form role="form">
- <div class="form-group">
- <label for="number"> 编号 </label>
- <input type="number" class="form-control" ng-model="number" placeholder="number">
- </div>
- <div class="form-group">
- <label for="name"> 名称 </label>
- <input type="text" class="form-control" ng-model="name" placeholder="name">
- </div>
- <button type="button" class="btn btn-primary" ng-click="addData()"> 提交 </button>
- </form>
- <!-- table -->
- <p class="text-center" ng-show="lists.length==0"> 暂无数据 </p>
- <!-- select -->
- <select class="form-control" ng-model="selectStatus" ng-options="status.id as status.name for status in textStatus" style="margin-bottom:10px">
- <option value="">-- 请选择 --</option>
- </select>
- <table class="table table-hover table-bordered" ng-show="lists.length!=0">
- <tr>
- <td ng-click="orderBy('id')"> 编号
- <span ng-show="status.id"></span>
- <span ng-show="!status.id"></span>
- </td>
- <td ng-click="orderBy('name')"> 名称
- <span ng-show="status.name"></span>
- <span ng-show="!status.name"></span>
- </td>
- <td ng-click="orderBy('upclick')"> 赞数
- <span ng-show="status.upclick"></span>
- <span ng-show="!status.upclick"></span>
- </td>
- <td ng-click="orderBy('downclick')"> 喷数
- <span ng-show="status.downclick"></span>
- <span ng-show="!status.downclick"></span>
- </td>
- <td ng-click="orderBy('status')"> 状态
- <span ng-show="status.status"></span>
- <span ng-show="!status.status"></span>
- </td>
- <td > 操作 </td>
- </tr>
- <tr ng-repeat="item in lists" ng-click="showinfo($index)">
- <td>{{item.id}}</td>
- <td>{{item.name | star}}</td>
- <td>{{item.upclick}}</td>
- <td>{{item.downclick}}</td>
- <td ng-class="{green:item.status==0,red:item.status==1,yellow:item.status==2,blue:item.status==3}">{{item.status | switchStatus}}</td>
- <td ng-click="delete($index)"><a href="javascript:;"> 删除 </a></td>
- </tr>
- </table>
- </div>
- <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
- <script type="text/javascript">
- angular.module('tableApp',[])
- .controller("tableCtrl",['$scope','$filter',function($scope,$filter){
- $scope.data=[
- {id:1,name:"丁家三哈",upclick:23,downclick:12,status:1},
- {id:2,name:"丁家三哈",upclick:3,downclick:2,status:2},
- {id:3,name:"丁家三哈",upclick:83,downclick:5,status:0},
- {id:4,name:"丁家三哈",upclick:50,downclick:9,status:3}
- ];
- $scope.lists = $scope.data;
- // 状态存储
- $scope.textStatus = [
- {id:0,name:'正常'},
- {id:1,name:'取消'},
- {id:2,name:'暂停'},
- {id:3,name:'后加'},
- ];
- $scope.panelTitle = "展开列表";
- $scope.ifShow = false;
- $scope.panelData = ["选项一","选项二","选项三"];
- // 添加数据
- $scope.addData = function(){
- if(!$scope.number){
- return false;
- }
- if(!$scope.name){
- return false;
- }
- $scope.lists.unshift({id:$scope.number,name:$scope.name,upclick:0,downclick:0,status:0});
- }
- // 删除数据
- $scope.delete = function(id){
- $scope.lists.splice(id,1);
- }
- // 显示信息
- $scope.showinfo = function(index){
- $scope.number=$scope.lists[index].id;
- $scope.name=$scope.lists[index].name;
- }
- // 排序
- $scope.status={id:false,name:false,upclick:false,downclick:false,status:false};
- $scope.orderBy = function(param){
- $scope.status[param] = !$scope.status[param];
- $scope.lists = $filter('orderBy')($scope.lists,param,$scope.status[param]);
- };
- // 监控
- $scope.$watch('search',function(n,o){
- $scope.lists = $filter('filter')($scope.data,n);
- });
- $scope.$watch('selectStatus',function(n,o){
- $scope.lists = $filter('filter')($scope.data,n);
- })
- }])
- // 过滤, 状态转换
- .filter('switchStatus',function(){
- return function(status){
- switch(status){
- case 0:
- return "正常";
- case 1:
- return "取消";
- case 2:
- return "暂停";
- case 3:
- return "后加";
- }
- }
- })
- // 星级转换
- .filter('star',function(){
- return function(param){
- return param = param.substr(0,2) + new String("*");
- }
- })
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/17169/4822522cc8824f6ac77163fb7e257e85.html