Question

我制作了以下代码来学习Angular。它使用用户输入的输入对包含对象列表的json文件发出ajax请求，然后将该列表打印给用户。

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script type="text/javascript">
        angular.module('myApp', [])
        .controller('myController', function($http) {
            var ctlr = this;
            ctlr.param = "";
            ctlr.responses = [];

            this.makeQuery = function() {
                $http.get('http://localhost:8080?p=' + ctlr.param))
                .then(function(data) {
                        ctlr.response = data; // data -> [{key1: value1,...},...]
                });
            };
        });
    </script>

</head>
<body ng-app="myApp">
    <div ng-controller="myController as mc">
        <input type="text" ng-model="mc.param">
        <input type="submit" ng-click="mc.makeQuery()" value="Submit">
        <ul>
            <li ng-repeat="res in responses">
                <span>{{res.key1}}, {{res.key2}}</span>
            </li>
        </ul>
    </div>
</body>
</html>

当我在Chrome中运行此代码时，我会看到一个空的子弹点列表。 Chrome DevTools显示按预期返回的json文件，因此我知道ctlr.param有效。但是，该列表有空的子弹点，因此ng-repeat无法正常工作。我似乎无法正确访问cltr.responses。有谁知道为什么？

Answer 1

您的responses对象绑定到this，而不是$scope，因为您正在使用controller as 您应该使用mc.responses代替responses

<li ng-repeat="res in mc.responses">
     <span>{{res.key1}}, {{res.key2}}</span>
</li>

您可以从johnpapa样式

中了解更多信息

Answer 2

以上解决方案是正确的，但我检查完整的代码，发现有一个错误。在脚本代码中

ctlr.response = data; // data -> [{key1: value1,...},...]应该是

ctlr.responses = data; // data -> [{key1: value1,...},...]

为什么我无法访问此ng-repeat中的数据？

2 个答案: