Question

我正在尝试使用Angular的$ http.get（）函数从js数组中列出DOM中的一些产品。

来自php的JSON回复工作正常，我console.log将数据及其JSON格式化为应该如何，但是Angular没有检测到这个......

我的JS代码：

var app = angular.module("system", []);
var base = "http://localhost/web";

app.controller("CartController", ['$http', function($http){

    $http.get(base+'/store/getCartProducts').
            success(function(data,status,headers,config){
                this.products = data.products;

            }).
            error(function(data,status,headers,config){
                 console.log("Error: " + data);
            });


    this.remove = function(item){
        var id = item.id;
        var index = this.products.indexOf(item);

        this.products.splice(index,1);
    };


}]);

我的HTML代码是：

<div ng-controller="CartController as cart" >
   <table>
        <tbody>

                <!-- CART ITEMS -->

                <tr ng-repeat="item in cart.products" ng-show="cart.products.length">

                        <td><img class="cart-bot-icon" ng-src="{{item.icon}}" ></td>
                        <td class="cart-product-title">{{item.title}}</td>
                        <td><span class="green-price">{{item.price | currency}}</span></td>
                        <td>
                            <a href ng-click="cart.remove(item)">
                                <span class="glyphicon glyphicon-trash delete-cart-item"></span>
                            </a>
                        </td>

                </tr>        
        </tbody>
    </table>
</div>

我已经尝试在控制器中创建一个this.loadProducts函数，并在div上的ng-init上调用它，但它不会加载它们。

我打印了products数组的长度，它显示得很完美。

我已经尝试初始化this.products = null然后通过调用this.loadProducts填充它而没有...

还尝试了$scope.products = []和$scope.products = null，没有尝试......出于想法= /

编辑1： 已更改为使用this而非$scope。当我在success方法中打印出data时，我得到[object Object]，更正了JSON对象。我也JSON.stringify(data)，我得到一个带双引号的JSON字符串。

Answer 1

您必须使用this.products。使用$scope语法时没有Controller As。

要进行调试，请尝试以下操作：

在success(function (...) { ... })中，添加第console.log("Data:", data);行。

然后在您的HTML中添加行{{cart.products}}以查看是否有任何绑定。

我怀疑ng-repeat存在显示问题。我星期五回答了类似的问题，用户遇到了同样的问题。您从服务器获得的响应可能被解释为字符串，而不是对象。

您可能需要将其从字符串转换为json：JSON.parse(data.products);

我认为问题是服务器返回的JSON无效。例如，如果它使用的是单引号而不是双引号，那么这将是无效的JSON。

使用JSON填充js数组的问题

1 个答案: