Skip to content

Instantly share code, notes, and snippets.

@arangates

arangates/angmat.html

Created October 23, 2016 06:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save arangates/0b18fedcb17918f3e981a97fdeb892fd to your computer and use it in GitHub Desktop.
Save arangates/0b18fedcb17918f3e981a97fdeb892fd to your computer and use it in GitHub Desktop.
Download ZIP
mat_ang_cards
Raw
angmat.html
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel='stylesheet prefetch' href='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.css'>
<!-- <link rel="stylesheet" href="css/style.css"> -->
<body>
<style type="text/css">
.carddemoBasicUsage .card-media {
background-color: #999999; }
</style>
<div ng-app="myApp" ng-controller="myCtrl">
<!-- <p>{{orders}}</p> -->
<md-content class="md-padding" layout-xs="column" layout="row">
<ul ng-repeat="order in orders.result track by $index">
<md-card class="carddemoBasicUsage">
<md-card-title>
<md-card-title-text>
<span class="md-headline">{{order.orderId}}</span>
<span class="md-subhead">{{order.customerCode}}</span>
</md-card-title-text>
<md-card-title-media>
<div ng-repeat="i in order.item_details" >
{{i.productcode}}-{{i.orderQty}}
</div>
</md-card-title-media>
</md-card-title>
<md-card-actions layout="row" layout-align="end center">
<md-button style="background-color: green;">Approve</md-button>
<md-button style="background-color: red;">Reject</md-button>
</md-card-actions>
</md-card>
<ul>
</md-content>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http
.get("https://gist.githubusercontent.com/arangates/1416896f746c9d48a622ee9eb167852a/raw/501f7be1f6d8ab6ab820ae55e8c0902be7c7b763/orders.json")
.then(function(response) {
$scope.orders = response.data;
console.log(response);
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment