gpt4 book ai didi

angularjs - 在 ngTable 中动态创建的排序和过滤列

转载 作者:行者123 更新时间:2023-12-02 23:28:27 27 4
gpt4 key购买 nike

在此plunk我有一个 ngTable,其中包含动态创建的列。这些列是可排序和可过滤的,但是当单击标题时,排序不起作用,过滤器也不起作用。有什么想法吗?

Javascript

var app = angular.module('app', ['ngTable']);

app.controller('myCtl', function($scope,NgTableParams) {

$scope.cols = [
{nm:'uid', title:'User ID', sortable: 'uid', filter:{uid: 'text'}},
{nm:'ugr', title: 'Group ID', sortable: 'ugr',filter:{ugr: 'text'}}
];


$scope.data = [
{ uid: 'aaa',ugr: '222'},
{ uid: 'bbb', ugr: '111'}
];

$scope.tableParams = new NgTableParams({dataset: $scope.data});

});

HTML

<div ng-controller="myCtl" ng-app="app">

<table ng-table-dynamic="tableParams with cols" show-filter="true" class="table table-bordered table-hover">
<tr ng-repeat="row in data">
<td ng-repeat="col in cols">{{row[col.nm]}}</td>
</tr>
</table>

</div>

最佳答案

1) Add references to AngularJS. EG:

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>

2)Add references to ngTable's javascript and css files. EG:

<link rel="stylesheet" href="https://cdn.rawgit.com/esvit/ng-table/v1.0.0/dist/ng-table.min.css">
<script src="https://cdn.rawgit.com/esvit/ng-table/v1.0.0/dist/ng-table.js"></script>

3)Where you declare your app module, add ngTable:

angular.module("myApp", ["ngTable"]);

4)In your html file within the controller where you plan to use ng-table, add:

<table ng-table="vm.tableParams" class="table" show-filter="true">
<tr ng-repeat="user in $data">
<td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
{{user.name}}</td>
<td title="'Age'" filter="{ age: 'number'}" sortable="'age'">
{{user.age}}</td>
</tr>
</table>

5)In your javascript file within the controller where you plan to use ng-table, declare:

var self = this;
var data = [{name: "Moroni", age: 50} /*,*/];
self.tableParams = new NgTableParams({}, { dataset: data});

演示 enter link description here

关于angularjs - 在 ngTable 中动态创建的排序和过滤列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38066953/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com