如何使用angularjs在Html页面上显示json数据到表

时间:2016-11-11 13:27:28

标签: html angularjs

请尝试使用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;      
     }); 
};

0 个答案:

没有答案