AngularJS $http example

by pj_js15

HTML

<div data-ng-app='httpApp' data-ng-controller='httpAppCtrlr'>
     <h1> AngularJS <a href='http://www.w3schools.com/angular/tryit.asp?filename=try_ng_customers_json'> $http examples</a> </h1>

    <p>In a <a href='http://www.w3schools.com/angular/tryit.asp?filename=try_ng_tables_simple'>table</a> with <a href='http://www.w3schools.com/angular/tryit.asp?filename=try_ng_tables_even'>conditions</a>

    </p>
    <table>
        <tr>
            <th>Name</th>
            <th>Country</th>
            <tr>
                <tr data-ng-repeat="n in names | orderBy: 'Country'">
                    <td ng-if="$odd" style="background-color:red">{{ n.Name }}</td>
                    <td ng-if="$even">{{ n.Name }}</td>
                    <td ng-if="$odd" style="background-color:green">{{ n.Country }}</td>
                    <td ng-if="$even">{{ n.Country }}</td>
                </tr>
    </table>
    <p>In a <a href='http://www.w3schools.com/angular/tryit.asp?filename=try_ng_tables_orderby'>ordered by</a> Country <a href='http://www.w3schools.com/angular/tryit.asp?filename=try_ng_tables_simple'>table</a>

    </p>
    <table>
        <tr>
            <th><a href='http://www.w3schools.com/angular/tryit.asp?filename=try_ng_tables_index'>Index</a>

            </th>
            <th>Name</th>
            <th>Country</th>
            <tr>
                <tr data-ng-repeat="n in names | orderBy: 'Country'">
                    <td>{{$index + 1}}</td>
                    <td>{{n.Name}}</td>
                    <td>{{n.Country}}</td>
                </tr>
    </table>
    <p>Single values</p>
    <ul>
        <li data-ng-repeat='n in names'>{{n.Name}}</li>
    </ul>
    <p>Whole JSON</p>
    <ul>
        <li data-ng-repeat='n in names'>{{n}}</li>
    </ul>
</div>

CSS

/*source: http://www.w3schools.com/angular/tryit.asp?filename=try_ng_tables_css*/
 table, th, td {
    border: 1px solid grey;
    border-collapse: collapse;
    padding: 5px;
}
table tr:nth-child(odd) {
    background-color: #f1f1f1;
}
table tr:nth-child(even) {
    background-color: #ffffff;
}

JavaScript

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

app.controller('httpAppCtrlr', function ($scope, $http) {
    $http.get('https://tpibookingsdemo2.azurewebsites.net/bc_order/GetSalesOrders')
        .then(function (response) {
        $scope.names = response.data.records;
    });
});