AngularJS: Material - List

by Ton Hanchai

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.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>
<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>
<div ng-controller="MyCtrl">
  <md-list-item ng-repeat="setting in settings">
    <div layout="row" layout-wrap layout-sm="column" style="display:table;">
      <div flex="25" style="display: table-cell;vertical-align:middle; height:40px; width:40px;">
        <img src="{{setting.icon}}"/> 
      </div>
      <div flex="25" style="display: table-cell; vertical-align:middle; text-align: justify;">
        <p> {{ setting.name }} </p>
      </div>
      <div flex="25" style="display: table-cell; vertical-align:sub; text-align: justify;max-height:40px">
        <md-input-container>
          <md-select name="category" ng-model="categories" style="height:10px;">
            <md-option ng-value="category.name" ng-repeat="category in categories">{{category.name}}
            </md-option>
          </md-select>
        </md-input-container>
      </div>
      <div flex="25" style="display: table-cell; vertical-align:middle; max-height:40px">
        <md-button ng-href="" target="_self" class="md-raised medButton">publish
				<img style="vertical-align:middle;" src="https://www.gstatic.com/images/icons/material/system/1x/publish_black_24dp.png"/>
        </md-button>
      </div>
    </div>
  </md-list-item>
  
  <div layout="row" layout-wrap style="border:1px solid red;">
    <div flex="33" style="border:1px solid blue;">[flex=33]</div>
    <div flex="66" style="border:1px solid green;">[flex=66]</div>
    <div flex="66" style="border:1px solid green;">[flex=66]</div>
 ...

CSS

button {
  color:white;
  border:0;
  font-size:2em;
  padding:0.3em 1em;

  /*
  * The important stuff
  */
  background-color:tan;
  transition:all linear 0.2s;
}

button:hover {
      background-color:wheat;
}

.main {
  width: 250px;
  height: 250px;
  background-color: #777;
  display: flex;
  justify-content: center;
}

.inner {
  width: 100px;
  height: 20px;
  background-color: #ccc;
  align-self: flex-end;
}

JavaScript

var myApp = angular.module('myApp', ['ngAria', 'ngAnimate', 'ngMaterial']);
myApp.controller('MyCtrl', function($scope) {
  $scope.radioValue = 'Single';
  $scope.settings = [
    { name: 'Wireless', extraScreen: 'Wi-fi menu',
    	icon: 'https://www.gstatic.com/images/icons/material/system/1x/account_balance_black_24dp.png',
      enabled: true },
    { name: 'Bluetooth', extraScreen: 'Bluetooth menu', 
    	icon: 'https://www.gstatic.com/images/icons/material/system/1x/android_black_24dp.png', 
      enabled: false }
  ];
  
  $scope.categories = [
    { name: 'YouTube' },
    { name: 'Gmail' },
    { name: 'GDN' }
  ];
    
  $scope.attributeList = [
  	{ name: 'item 1', text:'blah blah blah' },
    { name: 'item 2', text:'blah blah blah' },
    { name: 'item 3', text:'blah blah blah' },
    { name: 'item 4', text:'blah blah blah' },
    { name: 'item 5', text:'blah blah blah' },
    { name: 'item 6', text:'blah blah blah' },
    { name: 'item 7', text:'blah blah blah' },
    { name: 'item 8', text:'blah blah blah' },
    { name: 'item 9', text:'blah blah blah' },
    { name: 'item 10', text:'blah blah blah' }
  ];  
  
  $scope.additionalText = 'Panels must contain a prominent Close X, in %s point font or larger, on the corner of the unit.';
  $scope.masterList = [
         {
          id: "templates/957583552238221550/attributes/45949626884836407",
          displayLabel: "Headline Text",
          altText: "Headline Text",
          type: "FORMAT",
          visibility: "INTERNAL",
          ariaLabel: "Headline Text",
          version: "1",
         	optionType: "SINGLE_OPTION"
        },
        {
          id: "templates/957583552238221550/attributes/221516195381496105",
          displayLabel: "Frame Rate Range",
          altText: "Frame Rate Range",
          type: "FORMAT",
          visibility: "INTERNAL",
          ariaLabel: "Frame Rate Range",
          version: "1",
          optionType: "SINGLE_OPTION"
        },
        {
          id:...