0
私はAngularを学ぶために以下のコードを作った。ユーザーが入力した入力を使用して、オブジェクトのリストを含むjsonファイルをajaxリクエストし、そのリストをユーザーに出力します。なぜこのng-repeat内のデータにアクセスできないのですか？
<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に正しくアクセスできないようです。なぜ誰が知っていますか？あなたがcontroller as を使用しているよう
でなければなりません。それでも私に空のリストが与えられます – cody
'console.log（responses）;を共有してください; –
私は2つの原因が分かっています。一つは「応答」の束縛です。もう一つは、コードがJSONオブジェクトを期待している間に '$ http.get'が文字列を返すということです。 – cody