`Basic Usage

`Basic Usage.markdown

`Basic Usage

A Pen by Flavio Espinoza on CodePen.

License.

index.html

<div id="manageContactsSection" ng-controller="AppCtrl as ctrl" class="md-padding selectdemoBasicUsage" ng-app="MyApp">

  <h1 class="md-title">Contact Management In Progress</h1>
  <br/>
  <md-card>
    <md-toolbar class="md-padding blue-bg dark-text">
      <div class="md-toolbar-tools" layout="row">
        <div flex="50" class="md-headline">{{corporateEntity.name}}</div>
        <div flex="30" class="md-subhead align-right">Corporate Entity</div>
        <div flex="20"></div>
        <md-button ng-show="disableEdit"
                   class="md-fab md-mini md-fab-bottom-right" 
                  
                   aria-label="Edit Contacts" 
                   ng-click="editContact()">
          <i class="fa fa-pencil-square-o"></i>
        </md-button>
      </div>
      
      <md-button ng-hide="disableEdit"
                 class="md-fab md-mini md-fab-bottom-right" 
                   aria-label="Edit Contacts" 
                   ng-click="editContact()">
          <i class="fa fa-floppy-o"></i>
        </md-button>
    </md-toolbar>
    
        <div class="md-title md-padding">Addresses</div>
    <div id="addressSection" class="md-padding" ng-repeat="a in corporateEntity.addresses">

      <div layout="row">
        <md-input-container md-no-float>
          <input type="text" ng-model="a.addressLine1" placeholder="Address Line 1">
        </md-input-container>
        <md-input-container md-no-float ng-show="showAddressLine2(a.addressLine2)">
          <input type="text" ng-model="a.addressLine2" placeholder="Address Line 2">
        </md-input-container>
        <md-input-container md-no-float>
          <input type="text" ng-model="a.city" placeholder="City">
        </md-input-container>
        <md-input-container md-no-float>
          <md-select ng-model="a.state" placeholder="State">
            <md-option ng-repeat="state in ctrl.states" value="{{state.abbrev}}">{{state.abbrev}}</md-option>
          </md-select>
        </md-input-container>
        <md-input-container md-no-float>
          <input type="text" ng-model="a.zipcode" placeholder="Zipcode">
        </md-input-container>
      </div>

      <div layout="row">
        <md-input-container>
          <label>Contact Uses For</label>
          <md-select ng-model="a.type">
            <md-option ng-repeat="at in addressType" value="{{at.type}}">{{at.type}}</md-option>
          </md-select>
        </md-input-container>
        
        <div flex="5"></div>
        
        <div id="solarCityAddressTypes">
          <div class="md-subhead grey-text sc-uses">SolarCity Uses For</div> 
          <div layout="row" layout-wrap="">
            <div ng-repeat="item in a.solarCityType">
              <md-checkbox ng-checked="isChecked(item.checked)" ng-click="toggle(item.type, a.solarCityType)">
              {{ item.type }} 
            </md-checkbox>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div class="md-title md-padding">Phone Numbers</div>
    <div layout="row" ng-repeat="p in corporateEntity.phones" class="md-padding">
      <div flex="15">
        <md-input-container md-no-float>
          <md-select ng-model="p.type" placeholder="type">
            <md-option ng-repeat="pt in phoneTypes" value="{{pt.type}}">{{pt.type}}</md-option>
          </md-select>
        </md-input-container>
      </div>
      <div flex="5"></div>
      <md-input-container md-no-float>
        <input type="text" ng-model="p.number" placeholder="phone number">
      </md-input-container>
    </div>


  </md-card>
</div>

script.js

(function() {
  'use strict';
  angular
    .module('MyApp')
    .controller('AppCtrl', function($scope) {

      $scope.disableEdit = true;

      $scope.editContact = function() {
        $scope.disableEdit = false;
      };

      $scope.saveEditedContact = function() {
        $scope.disableEdit = true;
      };
    
    $scope.showAddressLine2 = function (addressLine2) {
      return (!$scope.disableEdit || addressLine2.length > 0);
    }

      $scope.phoneTypes = [{
        type: 'mobile',
        id: 1
      }, {
        type: 'home',
        id: 2
      }, {
        type: 'work',
        id: 3
      }, {
        type: 'other',
        id: 4
      }];

      $scope.addressType = [{
        type: 'corporate',
        id: 0
      }, {
        type: 'home',
        id: 1
      }, {
        type: 'work',
        id: 2
      }, {
        type: 'mailing',
        id: 3
      }, {
        type: 'install',
        id: 3
      }];

      $scope.solarCityAddressTypes = [{
          type: 'installation'
        }, {
          type: 'mailing'
        }, {
          type: 'billing'
        }],

      $scope.togglesss = function(item, list) {
        var idx = list.indexOf(item);
        if (idx > -1) list.splice(idx, 1);
        else list.push(item);
      };

      $scope.toggle = function(itemType, list) {
        var idx = _.findIndex(list, 'type', itemType);
        if (list[idx].checked == false) {
          list[idx].checked = true;
        } else {
          list[idx].checked = false;
        }

      };

      $scope.isChecked = function(item) {
        return item;
      };

      $scope.corporateEntity = {
        name: 'Joe\'s Pizza, Inc.',
        addresses: [{
          type: 'corporate',
          solarCityType: [{
              type: 'installation',
              checked: true
            }, {
              type: 'mailing',
              checked: true
            },

            {
              type: 'billing',
              checked: false
            }

          ],
          addressLine1: '3816 Main Street',
          addressLine2: '',
          city: 'Oakland',
          state: 'CA',
          zipcode: '94616'
        }],
        phones: [{
          type: 'mobile',
          number: '(415) 382-3861'
        }, {
          type: 'home',
          number: '(415) 382-3861'
        }],
        corporateContacts: [{
          firstName: 'Joe',
          lastName: 'Smith',
          gender: 'M',
          age: 52,
          primaryContactFor: 'Everything',
          jobTitle: 'CEO',
          addresses: [{
            type: 'company',
            solarCityType: [{
                type: 'installation',
                checked: true
              }, {
                type: 'mailing',
                checked: true
              },

              {
                type: 'billing',
                checked: false
              },

            ],
            addressLine1: '3816 Main Street',
            addressLine2: '',
            city: 'Oakland',
            state: 'CA',
            zipcode: '94616'
          }],
          phones: [{
            type: 'mobile',
            number: '(415) 382-3861'
          }, {
            type: 'home',
            number: '(415) 382-3861'
          }],
          authorizedSignerFor: [{
            contract: 'Purchasing'
          }, {
            contract: 'Install'
          }, {
            contract: 'Maintenance'
          }]
        }, {
          firstName: 'Jane',
          lastName: 'Watson',
          gender: 'F',
          age: 48,
          primaryContactFor: 'Everything',
          jobTitle: 'Office Manager',
          addresses: [{
            type: 'mailing',
            addressLine1: 'PO Box 83628',
            addressLine2: '',
            city: 'Oakland',
            state: 'CA',
            zipcode: '94616'
          }],
          phones: [{
            type: 'mobile',
            number: '(415) 382-3861'
          }, {
            type: 'home',
            number: '(415) 382-3861'
          }],
          authorizedSignerFor: [{
            contract: 'Purchasing'
          }, {
            contract: 'Maintenance'
          }]
        }],
        installations: [{
          name: 'Joe\'s Pizza',
          addresses: [{
            type: 'installation',
            addressLine1: '2832 Embarcadero',
            addressLine2: '',
            city: 'Oakland',
            state: 'CA',
            zipcode: '94232'
          }],
          phones: [{
            type: 'main',
            number: '(415) 382-3861'
          }],
          contacts: [{
            firstName: 'Tommy',
            lastName: 'Miles',
            gender: 'M',
            age: 28,
            primaryContactFor: 'Everything',
            jobTitle: 'Restaurant Manager',
            phones: [{
              type: 'mobile',
              number: '(415) 382-3861'
            }, {
              type: 'home',
              number: '(415) 382-3861'
            }],
            authorizedSignerFor: [{
              contract: 'Purchasing'
            }, {
              contract: 'Maintenance'
            }]
          }]
        }]
      };
      this.userState = '';
      this.states = ('AL AK AZ AR CA CO CT DE FL GA HI ID IL IN IA KS KY LA ME MD MA MI MN MS ' +
        'MO MT NE NV NH NJ NM NY NC ND OH OK OR PA RI SC SD TN TX UT VT VA WA WV WI ' +
        'WY').split(' ').map(function(state) {
        return {
          abbrev: state
        };
      });
    });
})();

scripts

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-messages.min.js"></script>
<script src="https://gitcdn.xyz/repo/angular/bower-material/v0.10.1/angular-material.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>

style.css

body {
  background-color: #f2f2f2;
}

#addressSection md-input-container {
  margin-right: 4px;
}

#manageContactsSection md-card {
  width: 800px;
  margin: 0 auto;
}

.grey-text {
  color: #959595;
}

.sc-uses {
  font-size: 10px;
}

styles

<link href="https://gitcdn.xyz/repo/angular/bower-material/v0.10.1/angular-material.css" rel="stylesheet" />