Angular - Complex Edit Page

by brnvndr

HTML

<div ng-controller="modelController">

<!-- Handle submit action via ng-click to supress the enter button from submitting the form -->
<form id="modelForm" name="modelForm" method="post" novalidate>

<h2>
Model Information
</h2>

<p>
    <label for="nameInput">Model Name:</label>
    <input type="text" id="nameInput" name = "nameInput" ng-class="pageMode" ng-model="model.name">
    <span class="displayValue" ng-class="pageMode">{{model.name}}</span>
    
    <label for="codeInput">Manufacturer Code:</label>
    <input type="text" id="codeInput" name = "codeInput" ng-class="pageMode" ng-model="model.manufacturerCode">
    <span class="displayValue" ng-class="pageMode">{{model.manufacturerCode}}</span>
    
</p>
<p>
    <label for="manufacturerSelect">Manufacturer:</label>
    <select id="manufacturerSelect" ng-model="model.manufacturer" ng-class="pageMode">
        <option ng-repeat="option in manufacturerList" value="{{option}}">{{option}}</option>
    </select>
    <span class="displayValue" ng-class="pageMode">{{model.manufacturer}}</span>
    
    <label for="statusSelect">Status:</label>
    <select id="statusSelect" ng-model="model.status" ng-class="pageMode">
        <option ng-repeat="option in statusList" value="{{option}}">{{option}}</option>
    </select>
    <span class="displayValue" ng-class="pageMode">{{model.status}}</span>
    
    <label for="categorySelect">Category:</label>
    <select id="categorySelect" ng-model="model.category" ng-class="pageMode">
        <option ng-repeat="option in categoryList" value="{{option}}">{{option}}</option>
    </select>
    <span class="displayValue" ng-class="pageMode">{{model.category}}</span>
</p>
<p>
    <label for="descriptionTextArea">Description:</label>
    <textarea id="descriptionTextArea" name = "descriptionTextArea" ng-class="pageMode" ng-model="model.description" cols="75" rows="3"> </textarea>
    <span class="displayValue" ng-class="pageMode">{{model.description}}</span>
</p>
<hr />

<h2>
Part...

CSS

form label {
    vertical-align:top;
    padding-right: 5px;
    padding-left: 5px;
    display: inline-block;
    text-align:right;
    font-weight:bold;
}


form input.viewMode {
  display: none;
}

form input.editMode {
  display:auto;
}

form textarea.viewMode {
  display: none;
}

form textarea.editMode {
  display:auto;
}

form select.viewMode {
  display:none;
}

form select.editMode {
  display:auto;
}

form .displayValue.viewMode{
  display:auto;
}

form .displayValue.editMode {
  display:none;
}

.viewButton.viewMode {
  display:auto;

}

.viewButton.editMode {
  display:none;

}

.editButton.viewMode {
  display:none;
}

.editButton.editMode {
  display:auto;
}

.newLine.viewMode {
  display:none;
}

.newLine.editMode {
  display:auto;
}

table {
  color:#333;
  border-collapse:collapse;
  border-spacing:0;
  width:75%;
}

td,th {
  border: 1px solid #CCC;
  height:30px;
  padding:3px;
}

th {
  background:#F3F3F3;
  font-weight:bold;
}

table input {
   width:100%;
   height:100%;
   padding:0px;
}

table button {
  width:100%;
   height:100%;
   padding:0px;
}

table select {
  width:100%;
   height:100%;
   padding:0px;
}

JavaScript

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

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

	var status = {};
  
  status.statusList = ['Active', 'Announced', 'Inactive','Discontinued'];

	return status;
}]);

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

	var manufacturer = {};
  
  manufacturer.manufacturerList = ['Trek', 'Bontrager', 'Specialized','Giant'];

	return manufacturer;
}]);

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

	var category = {};
  
  category.categoryList = ['Road Bikes', 'Bar Tape', 'Wheels','Saddles', 'Handlebars', 'Bike Computer'];

	return category;
}]);


//http://stackoverflow.com/a/18295416/24892
productManagerApp.directive('focusOn', function() {
   return function(scope, elem, attr) {
      scope.$on('focusOn', function(e, name) {
        if(name === attr.focusOn) {
          elem[0].focus();
        }
      });
   };
});

productManagerApp.factory('focus', function ($rootScope, $timeout) {
  return function(name) {
    $timeout(function (){
      $rootScope.$broadcast('focusOn', name);
    });
  }
});


productManagerApp.controller('modelController', ['$scope', 'status', 'manufacturer','category','focus', function($scope, status,manufacturer,category, focus){

    $scope.pageMode = "viewMode";
    $scope.statusList = status.statusList;
    $scope.manufacturerList = manufacturer.manufacturerList;
    $scope.categoryList = category.categoryList;
    
    
    $scope.model = {};
    $scope.modelPrior = {};
    $scope.newPartNumber = {}
    angular.copy(modelData, $scope.model);
    angular.copy(emptyPartNumber, $scope.newPartNumber)
    $scope.deletedPartNumbers = [];
    
    $scope.editModel = function () {
       angular.copy($scope.model, $scope.modelPrior);
       $scope.pageMode = "editMode";
    }

    $scope.newModel = function () {
         angular.copy($scope.model, $scope.modelPrior);
         angular.copy(emptyModel, $scope.model);
         $scope.pageMode = "editMode";

    }

   ...