加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

AngularJS中使用ngTable

发布时间:2020-12-17 09:42:46 所属栏目:安全 来源:网络整理
导读:在HTML中使用ngTable 可以方便的进行排序,筛选,分页,添加,编辑删除等操作,不用再从数据库里面进行分页等操作 需要引用的文件 angular.js ng-table.js ng-table.css bootrasp.css 注入依赖 为ng-table 设置属性和数据 var app = angular.module( 'app' ,

在HTML中使用ngTable 可以方便的进行排序,筛选,分页,添加,编辑删除等操作,不用再从数据库里面进行分页等操作

  • 需要引用的文件
    • angular.js
    • ng-table.js
    • ng-table.css
    • bootrasp.css

  • 注入依赖
  • 为ng-table 设置属性和数据
var app = angular.module('app',[ 'ngTable']);
app.controller('controller',function($scope,NgTableParams) {
    $http.get("/query")
        .success(function(data) {
            $scope.userTable = new NgTableParams({
                        page : 1,count : 5
                    },{
                        total : data.length,getData : data
                        }
                    }); 
            })
        });
}
  • 为 table 添加 ng-table 属性
  • 显示数据
<table ng-table="userTable" class="table table-hover"> <tbody> <tr> <th>编号</th> <th>用户名</th> </tr> <tr ng-repeat="user in $data"> <td>{{user.id}}</td> <td>{{user.name}}</td> </tr> </tbody> </table>

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读