我正在尝试使用 angularJS 来过滤表格中的数据。我需要从一个看起来像这样的 json 文件(示例文件)加载数据
[{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
这是我的 HTML 文件:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
<script data-require="ng-table@*" data-semver="0.3.0" src="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.js"></script>
<link data-require="ng-table@*" data-semver="0.3.0" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.css" />
<link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="main" ng-controller="DemoCtrl">
<table ng-table="tableParams" show-filter="true" class="table">
<tr ng-repeat="tests in test ">
<td data-title="'Date'">
{{test.date}}
</td>
<td data-title="'Computer/Server Name'">
{{test.deviceName}}
</td>
<td data-title="'username'" filter="{ 'name': 'text' }">
{{test.name}}
</td>
<td data-title="'Device Type'">
{{test.deviceType}}
</td>
</tr>
</table>
</body>
</html>
这是 script.js 文件
var app = angular.module('main', ['ngTable']).
controller('DemoCtrl', function($http, $scope, $filter, ngTableParams) {
$http.get('test.json')
.then(function(res){
var data = res.data;
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 1000000000000000000, // count per page
filter: {
name: '' // initial filter
}
}, {
total: data.length, // length of data
getData: function($defer, params) {
// use build-in angular filter
var orderedData = params.filter() ?
$filter('filter')(data, params.filter()) :
data;
$scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
params.total(orderedData.length); // set total for recalc pagination
$defer.resolve($scope.users);
}
});alert(data);
});
});
正在读取文件，因为警报函数返回所有数据，但表中没有显示任何内容。
最佳答案
您的 Json 无效，所有属性都应该用 " 双引号括起来
[
{
"name": "Moroni",
"age": 50,
"deviceName": "test"
},
{
"name": "Tiancum",
"age": 43,
"deviceName": "test"
},
{
"name": "Jacob",
"age": 27,
"deviceName": "test"
},
{
"name": "Nephi",
"age": 29,
"deviceName": "test"
}
]
您还应该将从 Ajax 检索到的数据绑定(bind)到 $scope.tables
关于javascript - AngularJS 表格过滤器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29605421/