Question

我有以下代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/site.css" />
    <!--<script src="js/script.js"></script>-->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <p ng-model="array"></p>
        <input type="text" ng-model="product" />
        <table>
            <tr>
                <th>Name</th>
                <th>Description</th>
                <th>Price</th>
                <th>Image</th>
            </tr>
            <tr ng-repeat="product in products">
                <td>{{ product.name }}</td>
                <td>{{ product.description }}</td>
                <td>{{ product.price }}</td>
                <td>{{ product.image }}</td>
            </tr>
        </table>
        <script>
            var app = angular.module('myApp', []);
            app.controller('myCtrl',
                function callController($scope) {
                    fetch('js/adds.json').then(function (response) {
                        return response.json();
                    }).then(function (data) {
                        var jproducts = data["products"];
                        for (var i = 0; i < jproducts.length; i++) {
                            $scope.products = [
                                {
                                    name: jproducts[i]["name"],
                                    description: jproducts[i]["description"],
                                    price: jproducts[i]["price"],
                                    image: jproducts[i]["image"]
                                }
                            ];
                        }
                    });
                });
        </script>
    </div>
</body>
</html>

这是JSON文件：

{
    "products" : [
        { "name" : "Porsche Bike", "description" : "A bike with a brand name!", "price" : 10000, "image" : "bike.jpg" }, 
        {  "name" : "Pretty Shoes", "description" : "Come to our shoe store", "price" : 54.45, "image" : "shoes.jpg" },
        { "name" : "Pie Fest!", "description" : "Oh yeah this is officially the best pie ever", "price" : 3.45, "image" : "pie.jpg" },
        { "name" : "Inside Out Umbrella", "description" : "Designer Umbrellas for low cost", "price" : 14.55, "image" : "umbrella.jpg" },
        { "name" : "Coffee", "description" : "Come get your morning dessert", "price" : 4.59, "image" : "coffee.jpg" }
    ]
}

我需要的是将JSON显示到表中。但是，到目前为止它只显示：

Coffee  Come get your morning dessert   4.59    coffee.jpg

如何让它显示所有产品？而且，当我在文本输入中输入内容时，它只显示一些内容。

Answer 1

您不必在控制器内迭代生产。只需将其指定为

即可

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get('adds.json').
  then(function(response) {
    $scope.products = response.data.products;
  });
});

<强> DEMO

如何将JSON文件放入对象并使用AngularJS显示？

1 个答案: