我编写了以下代码来学习 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 。有谁知道为什么吗？
最佳答案
您的 responses 对象绑定(bind)到 this，而不是绑定(bind)到 $scope，因为您正在使用 controller as
您应该使用 mc.responses 而不是 responses
<li ng-repeat="res in mc.responses">
<span>{{res.key1}}, {{res.key2}}</span>
</li>
您可以从johnpapa阅读更多内容风格
关于javascript - 为什么我无法访问此 ng-repeat 中的数据？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39278139/