我的 angular ng-repeat div 在浏览器中被评论了

Question

我找了几天都没有找到解决办法。我认为这个问题是特定于代码的。我是 angular 的新手，正在使用 angular 1.6.

很抱歉我的 post 是这样的，这是我第一次 post 堆栈溢出

var app = angular.module('productApp', []);

app.controller('myController', function($scope, $http){
    $http.get("http://localhost/js/database.json")
    .then(function(response){
        $scope.datad = response.products;
        return $scope.datad;
    })
})

//database.json file

{
    "products": [
        {
            "name": "toy z",
            "price" : "1999",
            "image":"toys/007.png",
            "category": "Toys" 
        },
        {
            "name": "Magic Swan",
            "price" : "200",
            "image":"toys/006.png",
            "category": "Toys" 
        },
        {
            "name": "Ben10 Watch",
            "price" : "499",
            "image":"toys/005.png",
            "category": "Toys" 
        }
    ]
 }

<html lang="en">
<body ng-app="productApp">
 <div ng-controller="myController" >
  <ul>
      <li ng-repeat="p in datad">
          {{p.name}}  {{p.price}}
      </li>
  </ul>
    </div>
    <script src="/js/angular.min.js"></script>
    <script src="/js/angular-route.min.js"></script>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/main.js"></script>
    <script src="/js/app.js"></script>
</body>
</html>

Answer 1

首先，确保 url of database.json 您可以使用相对路径，例如下面的代码。

你也需要改变

$scope.datad = response.products;

到

$scope.datad = response.data.products;

response 对象包含有关 http 请求和结果的所有信息将进入 data 对象。

终于不用return$scope.datat了，因为products assigned to scope。

$http.get("./database.json")
.then(function(response){
    console.log(response);// print response to check.
    $scope.datad = response.data.products;
})

我的 angular ng-repeat div 在浏览器中被评论了

My angular ng-repeat div is commented in the browser

html

angularjs

angularjs-ng-repeat