请尝试使用angularjs在html页面上显示我的json文件,以便从源中获取数据,并在单击指向数据的相应链接时以表格格式显示数据。我是棱角分明的新人。
---这是我的app.js文件---
var app = angular.module('dapp',['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl: 'templates/home.html',
controller: 'homeController'
})
// route for the about page
.when('/facilities', {
templateUrl: 'templates/facilties.html',
controller: 'facilitiesController'
});
});
----这是我的facilities.html页面----
<div class="span3">
<ul class="nav nav-list well">
<li ng-repeat="facility in facilities" ng-bind="facility.Province">
</li>
</ul>
<!--<div ng-repeat="facility in facilities" ><div>Type:{{facility.type}}-->
</div>
<div class="table">
<p ng-hide="facilities">No facility found</p>
<table class="table table-striped table-bordered table-hover" ng-show="facilities">
<thead>
<tr>
<th>Facility Id</th>
<th>Name of Facility</th>
<th>Municipality</th>
<th>Province</th>
<th>Year of Construction</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="facility in facilities">
<td class="span2" ng-bind="facility.id">{{facility.id}}</td>
<td class="span2" ng-bind="facility.name">{{facility.name}}</td>
<td class="span2" ng-bind="facility.municipality"></td>
<td class="span2" ng-bind="facility.province">{{facility.province}}</td>
<td class="span2" ng-bind="facility.yearOfConstruction"></td>
</tr>
</tbody>
</table>
<div class="row controls">
<form ng-click="fetchFacilities()">
<input type="submit" class="btn btn-primary btn-lg" value="indoor sport facilities">
</form>
</div>
</div>
-----这是我为获取数据而创建的函数----
$scope.fetchFacilities = function() {
$http.get("thesis-folorunsho.c9users.io/facility").then(function(response) {
console.info('Facilities:', response.data);
$scope.facilities = response.data;
});
};