我试图使用角度js将Json数据传递给视图

时间:2016-07-22 08:01:38

标签: angularjs json

我正在尝试使用Angular JS传递我的数据,但我正在获取空白页面 我选择这个例子http://www.w3schools.com/angular/tryit.asp?filename=try_ng_customers_sql

然后我尝试从我的本地数据库

<div ng-app="myApp" ng-controller="customersCtrl">

    <table>
        <tr ng-repeat="x in names">
            <td>@{{ x.id }}</td>
            <td>@{{ x.name }}</td>
        </tr>
    </table>

</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $http) {
        $http.get("http://localhost/sample/public/foo")
                .then(function (response) {
                    $scope.names = response.data.hotels;
                });
        });
</script>

我的http://localhost/sample/public/foo输出就像下面那样,我做错了

"{"hotels":[{"id":1,"name":"Sanmira Renaissance"},{"id":2,"name":"Galadari Hotel"},{"id":3,"name":"Grand Oriental Hotel"},{"id":4,"name":"Fullmoon Garden Hotel"},{"id":5,"name":"Ramada Hotel \u2013 Colombo"},{"id":6,"name":"Taj Samudra"},{"id":7,"name":"Cinnamon Grand"},{"id":8,"name":"Cinnamon Lakeside"}]}"

1 个答案:

答案 0 :(得分:0)

你的JSON有问题没有正确格式化,并且像这样更改你的控制器,

app.controller("listController", ["$scope","$http",
    function($scope, $http) {
             $http.get('test.json').then(function (response){
                $scope.hotels = response.data.hotels;

        });

}]);

工作application