【问题标题】:My angular ng-repeat div is commented in the browser [closed]我的角度 ng-repeat div 在浏览器中被注释 [关闭]
【发布时间】:2018-03-11 04:22:58
【问题描述】:

我搜索了几天,但未能找到解决方案。我认为这个问题是特定于代码的。 我是 angular 新手,使用 angular 1.6。

对不起,我的帖子是这样的,这是我关于堆栈溢出的第一篇文章

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>

【问题讨论】:

  • 还有...你能显示minimal reproducible example吗?你的代码是什么?最好附上如何在其他机器上重现该错误的说明。
  • 问题是特定于代码的。那么代码在哪里?
  • 分享您的代码?可能是脚本加载问题?

标签: html angularjs angularjs-ng-repeat


【解决方案1】:

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

你也需要改变

$scope.datad = response.products;

$scope.datad = response.data.products;

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

最后不需要返回$scope.datat,因为产品已经分配到范围了。

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

【讨论】:

  • 成功了,非常感谢。你保存了我的项目
猜你喜欢
  • 2017-09-30
  • 1970-01-01
  • 2016-12-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-12-23
相关资源
最近更新 更多