Angular - Simple Edit Page

by brnvndr

HTML

<div ng-controller="manufacturerController">
  <h1>Manufacturer</h1>
  
  <form id="manufacturerForm" name="manufacturerForm"  method="post" novalidate ng-submit="saveManufacturer()"   >
      <p>
          <label for="nameInput">Name:</label>
          <input type="text" id="nameInput" name="nameInput"  ng-class="pageMode" ng-model="manufacturer.name" required/>
          <span class="error"  ng-show="manufacturerForm.nameInput.$error.required">Name field is required</span>
          <span class="displayValue" ng-class="pageMode">{{manufacturer.name}}</span>
      </p>
      <p>
          <label for="accountNumberInut">Account #:</label>
          <input type="text" id="accountNumberInput" name="accountNumberInput" ng-class="pageMode" ng-model="manufacturer.accountNumber" required minlength="3" ng-maxlength="15"/>
          <span class="error"  ng-show="manufacturerForm.accountNumberInput.$error.required">Account Number is required</span>
          <span class="error"   ng-show="manufacturerForm.accountNumberInput.$error.minlength || manufacturerForm.accountNumberInput.$error.maxlength">Account Number must be between 3 and 15 chars</span>
          <span class="displayValue"  ng-class="pageMode">{{manufacturer.accountNumber}}</span>
      </p>
      <p>
          <label for="credLimitInput">Credit Limit:</label>
          <input type="text" id="creditLimitInput" ng-class="pageMode" ng-model="manufacturer.creditLimit"/>
          <span class="displayValue" ng-class="pageMode">{{manufacturer.creditLimit | currency}}</span>
      </p>
      <p>
          <label for="addressLine1Input">Address 1:</label>
          <input type="text" id="adressLine1Input" ng-class="pageMode" ng-model="manufacturer.addressLine1"/>
          <span class="displayValue" ng-class="pageMode">{{manufacturer.addressLine1}}</span>
      </p>
      <p>
          <label for="addressLine2Input">Address 2:</label>
          <input type="text" id="addressLine2Input" ng-class="pageMode"...

CSS

form label {
  width: 150px;
    padding-right: 20px;
    display: inline-block;
    text-align:right;
    font-weight:bold;
}

form input[type=text] {
  width: 250px;
  display: inline-block;
}

form input.viewMode {
  display: none;
}

form input.editMode {
  display:auto;
}

form select.viewMode {
  display:none;
}

form select.editMode {
  display:auto;
}

form .displayValue.viewMode{
  display:auto;
}

form .displayValue.editMode {
  display:none;
}

.error {
  color:red;
}

.viewButton.viewMode {
  display:auto;

}

.viewButton.editMode {
  display:none;

}

.editButton.viewMode {
  display:none;
}

.editButton.editMode {
  display:auto;
}

JavaScript

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


productManagerApp.factory('lookup',[function(){

	var lookup = {};
  
  lookup.statesList = ['IA', 'CA', 'MN','SD','NY','FL', 'AK'];

	return lookup;
}]);

// sample filter via: http://stackoverflow.com/a/12728924/24892
productManagerApp.filter("telephone", function () {
    return function(telephone){
        if (!telephone)
            return '';
        var value = telephone.toString().trim().replace(/^\+/, '');

        if (value.match(/[^0-9]/)) {
            return telephone;
        }

        var country, city, number;

        switch (value.length) {
            case 10: // +1PPP####### -> C (PPP) ###-####
                country = 1;
                city = value.slice(0, 3);
                number = value.slice(3);
                break;

            case 11: // +CPPP####### -> CCC (PP) ###-####
                country = value[0];
                city = value.slice(1, 4);
                number = value.slice(4);
                break;

            case 12: // +CCCPP####### -> CCC (PP) ###-####
                country = value.slice(0, 3);
                city = value.slice(3, 5);
                number = value.slice(5);
                break;

            default:
                return telephone;
        }

        if (country == 1) {
            country = "";
        }

        number = number.slice(0, 3) + '-' + number.slice(3);

        return (country + " (" + city + ") " + number).trim();
    };
});

productManagerApp.controller('manufacturerController', ['$scope', 'lookup', function($scope, lookup){

	$scope.pageMode = "viewMode";
  $scope.statesList = lookup.statesList;
  $scope.manufacturer = {};
  $scope.manufacturerPrior = {};
  angular.copy(manufacturerData, $scope.manufacturer);
 
  $scope.editManufacturer = function () {
       angular.copy($scope.manufacturer, $scope.manufacturerPrior);
       $scope.pageMode = "editMode";
  }
  
  $scope.newManufacturer = function () {
   ...