2016-07-08 8 views
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> 

答えて

1

私はそれを理解することができました。私は以下のコード行を変更する必要がありました。

var app = angular.module('myApp', ['onsen']);

関連する問題