Question

我正在测试AngularJS。我正在尝试使用json阅读http.get文件并将其显示在ng-repeat中。

我有两个问题......

首先，无法识别扩展名为.json的文件。我必须用.js扩展名重命名

其次，无法识别文件中的格式元素。中继器充满了空行。

这是我的Angular.html

<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
    <title>Ajax</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="angular.js"></script>
    <link href="bootstrap.css" rel="stylesheet" />
    <link href="bootstrap-theme.css" rel="stylesheet" />
    <script>
        angular.module("exampleApp", [])
        .controller("defaultCtrl", function ($scope, $http) {
            $scope.loadData = function () {
                $http.get("productData.js").success(function (data) {
                    $scope.products = data;
                });
            }
        });
    </script>
</head>
<body ng-controller="defaultCtrl">
    <div class="panel panel-default">
        <div class="panel-body">
            <table class="table table-striped table-bordered">
                <thead><tr><th>Name</th><th>Category</th><th>Price</th></tr></thead>
                <tbody>
                    <tr ng-hide="products.length">
                        <td colspan="3" class="text-center">No Data</td>
                    </tr>
                    <tr ng-repeat="item in products">
                        <td>{{name}}</td>
                        <td>{{category}}</td>
                        <td>{{price | currency}}</td>
                    </tr>
                </tbody>
            </table>
            <p>
                <button class="btn btn-primary" ng-click="loadData()">
                    Load Data
                </button>
            </p>
        </div>
    </div>
</body>
</html>

这是我的ProductData.js

[{ "name": "Apples", "category": "Fruit", "price": 1.20, "expiry": 10 },
{ "name": "Bananas", "category": "Fruit", "price": 2.42, "expiry": 7 },
{ "name": "Pears", "category": "Fruit", "price": 2.02, "expiry": 6 },
{ "name": "Tuna", "category": "Fish", "price": 20.45, "expiry": 3 },
{ "name": "Salmon", "category": "Fish", "price": 17.93, "expiry": 2 },
{ "name": "Trout", "category": "Fish", "price": 12.93, "expiry": 4 }]

我做错了什么？

感谢。

Answer 1

将您的文件重命名为productdata.json。并根据它更改您的代码

angular.module("exampleApp", [])
        .controller("defaultCtrl", function ($scope, $http) {
            $scope.loadData = function () {
                $http.get("productData.json").success(function (data) {
                    $scope.products = data;
                });
            }
        });

此外，如果您使用的是1.3以上的angularjs版本，请使用。替换.Success，因为.Success已被弃用

Answer 2

我发现为什么它没有出现......这是我的错误......我不得不替换

  <tr ng-repeat="item in products">
                        <td>{{name}}</td>
                        <td>{{category}}</td>
                        <td>{{price | currency}}</td>
                    </tr>

这个

  <tr ng-repeat="item in products">
                        <td>{{item.name}}</td>
                        <td>{{item.category}}</td>
                        <td>{{item.price | currency}}</td>
                    </tr>

我忘了添加item.

无论如何..我找不到为什么我的PC不接受.json文件...如果我把这些文件放在IIS目录并从IIS运行它，它工作正常..但它不起作用在IIS之外。

AngularJs读取json文件无法识别

2 个答案: