Search code examples
angularjsonsen-uimonaca

OnsenUI Loading Ons-List with Remote JSON Data


First, I am a beginner in the process of learning. I have been experimenting with this code to load remote json data in to a ons-list. Can someone explain to me why the data is not loading in to the list? I am using Monaca. I can get the data to show up when using the UL tag. It just won't show up in the ons-list tag. Your help is very much appreciated!

<!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>

Solution

  • I was able to figure it out. I needed to change the line of code below.

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