[英]How to get table data from json file in angularjs
我想使用angularjs
或jquery
从JSON文件中获取数据。 以下代码不起作用,我找不到错误:
的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>
<script data-require="ng-table-export@0.1.0" data-semver="0.1.0" src="http://bazalt-cms.com/assets/ng-table-export/0.1.0/ng-table-export.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">
Example from <a target="_blank" href="https://github.com/collinsauve">collinsauve</a>
<h2>Dataset: <select ng-model="dataset" ng-options="ds for ds in datasets"></select></h2>
<table ng-table="tableParams" class="table">
<tr ng-repeat="user in $data">
<td data-title="'Name'" sortable="name">
{{user.name}}
</td>
<td data-title="'Age'" sortable="'age'">
{{user.age}}
</td>
</tr>
</table></body>
script.js:
var app = angular.module('main', ['ngTable']).
controller('DemoCtrl', function($scope, $filter, ngTableParams) {
$scope.datasets = ["1","2"];
$scope.dataset = "1";
var getData = function() {
if($scope.dataset=="1")
{
$.getJSON('http://localhost/custest/json1.json', function(json) {
return json;
});
}
if($scope.dataset=="2")
{
$.getJSON('http://localhost/custest/json2.json', function(json) {
return json;
});
}
};
$scope.$watch("dataset", function () {
$scope.tableParams.reload();
});
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10, // count per page
sorting: {
name: 'asc' // initial sorting
}
}, {
total: function () { return getData().length; }, // length of data
getData: function($defer, params) {
var filteredData = getData();
var orderedData = params.sorting() ?
$filter('orderBy')(filteredData, params.orderBy()) :
filteredData;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
},
$scope: { $data: {} }
});
});
json1.json:
[{name: "One", age: 50},
{name: "Two", age: 43},
{name: "Three", age: 27},
{name: "Four", age: 29},
{name: "Five", age: 34},
{name: "Six", age: 43},
{name: "Seven", age: 27},
{name: "Eight", age: 29}
];
json2.json:
[{name: "Jacob", age: 50},
{name: "Jacob", 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}
];
而不是使用jQuery的ajax方法,您应该使用angular的http
服务。 https://docs.angularjs.org/api/ng/service/ $ http
成功完成请求并设置数据后,请调用$scope.tableParams.reload();
工作柱塞: http ://plnkr.co/edit/GFEPEUzhHR8fKTTSxxyy?p=preview
var app = angular.module('plunker', ['ngTable']);
app.controller('MainCtrl', function($scope, $filter, $http, ngTableParams) {
$scope.datasets = ["1", "2"];
$scope.dataset = "1";
var file,jsonData;
$scope.$watch("dataset", function () {
if($scope.dataset=="1"){
file = 'json1.json';
}
else if($scope.dataset=="2"){
file = 'json2.json';
}
$http.get(file).success(function(response){
jsonData = response;
$scope.tableParams.reload();
});
});
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10, // count per page
sorting: {
name: 'asc' // initial sorting
}
}, {
total: function () {
return jsonData.length;
}, // length of data
getData: function ($defer, params) {
var filteredData = jsonData;
var orderedData = params.sorting() ? $filter('orderBy')(filteredData, params.orderBy()) : filteredData;
if(orderedData){
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
},
$scope: {
$data: {}
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.