Angular JS

XHR request through Angular and iterating through an object with Angular.

by Vico Bertogli III

HTML

<div ng-app="myApp" ng-controller="customersCtrl">
    <table>
        <tr ng-repeat="x in names | orderBy : 'Country'">
            <td>{{ x.Name }}</td>
            <td>{{ x.Country }}</td>
        </tr>
    </table>
</div>

SCSS

div[ng-app="myApp"] {
    padding:5px;
    margin:10px;
    border:1px #333 solid;
    table {
        width:100%;
        tr {
            border-bottom:1px #333 solid;
            &:nth-child(odd) {
              background-color: #f1f1f1;
            }
            &:last-child {
                border:none;
            }
            td {
                padding:5px;
            }
        }
    }
}

JavaScript

var app = angular.module('myApp', []);
app.controller('customersCtrl', function ($scope, $http) {
    $http.get("http://www.w3schools.com/website/Customers_mysql.php")
        .success(function (response) {
        $scope.names = response;
    });
});