1
まず、私は学習の初心者です。私はリモートのjsonデータをons-listにロードするためにこのコードを試してきました。誰かがデータがリストにロードされていない理由を私に説明することはできますか?私はモナカを使用しています。 ULタグを使用しているときにデータが表示されます。これはons-listタグには表示されません。あなたの助けは非常に高く評価されています!OnsenUIリモートJSONデータを含むリストを読み込む
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<script src="lib/angular/angular.min.js"></script>
<script src="lib/onsenui/js/onsenui.min.js"></script>
<script src="lib/onsenui/js/angular-onsenui.min.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
<link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
<link rel="stylesheet" href="css/style.css">
<script>
ons.ready(function() {
console.log("Onsen UI is ready!");
});
</script>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php").then(function (response) {
$scope.myData = response.data.records;
});
});
</script>
</head>
<body>
<ons-page ng-app="myApp" ng-controller="customersCtrl">
<ons-toolbar>
<div class="center">Introduction</div>
</ons-toolbar>
<ul>
<li ng-repeat="x in myData">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
<ons-row ng-repeat="x in myData">
<ons-col>{{ x.Name }}</ons-col>
<ons-col>{{ x.Country }}</ons-col>
</ons-row>
<ons-list ng-controller="customersCtrl">
<ons-list-item ng-repeat="x in myData">
{{ x.Name }}
</ons-list-item>
</ons-list>
</ons-page>
</body>
</html>