Angular Material Sample

Using the angular material library

by suraj ahir

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-animate.js"></script>
<div ng-app='home'>
    <!-- App goes here -->
    <md-content layout-padding ng-controller="MainCtrl as mainCtrl">
   
  <md-select ng-model="selectedUser" ng-model-options="{trackBy: '$value.id'}">
    <md-option ng-value="op.customer.id" ng-repeat="op in optionVal">{{op.customer.name}}</md-option>
  </md-select>

    </md-content>
</div>

{{selectedUser}}

JavaScript

var app = angular.module('home', ['ngAria', 'ngAnimate', 'ngMaterial']);

angular.module('home').config(function($mdThemingProvider) {
    $mdThemingProvider.theme('default')
        .primaryPalette('pink')
        .accentPalette('grey');
});

  app.controller('MainCtrl' , function ($scope, $http){
  	  
    	$http({
       method : "GET",
       url : "https://artflowserver.herokuapp.com/api/customers"
      }).then(
        function mySucceess(response){
          $scope.optionVal = response.data;
        }, 
        function myError(response){
            $scope.optionVal = "Somethins wrong";
        } )
});