JSFiddle - React, Tailwind, and code Playground

Commission Plan Table Example : Angular 1.5.8

by nickadeemus2002

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.2/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-app="CommissionPlan">
  <div ng-controller="PlanContainer" class="container">
    <div class="table-responsive">
      <plan-list-items commission-plans="vm.commissionPlans"
                       handle-update="vm.handlePlanUpdate" />
    </div>
  </div>
</div>

JavaScript

/**
* templates
*/

var pageTitle = 'Commission Plan Configuration';
const tplPlanListItems = `
	<h2>${pageTitle}</h2>
	<div>
  	{{ vm }}
    <table class="table">
      <tr>
      	<th>Name</th>
        <th>Department</th>
        <th>Current Commission Plan</th>
      </tr>
      <tr ng-repeat="plan in $ctrl.commissionPlans">
      	<td>
        	{{ plan.lastName }}, 
        	{{ plan.firstName }}
        </td> 
        <td>	{{ plan.department }}</td> 
        <td>
          <select class="form-control"
          			  ng-model="state.currentPlan" 
          			  ng-change="onChangePlan()">          
         		<option 
            	ng-repeat="planOption in plan.plans" 
            	ng-selected="planOption.id === plan.currentPlan "
              value="planOption.id">
            	{{ planOption.name }}
         		</option>
           </select>
        </td> 
      </tr>
    </table>
  </div>
`;


/**
* classes : )
*/
  function PlanContainer($scope){
    //container will manage state
    var vm = this;
    vm.commissionPlans =  serverData.commissionPlans;     
    vm.handlePlanUpdate = function(e){
    	console.log(`handlePlanUpdate => ${e}`);
    }  
  }
  
  function PlanListItemsController($scope){    
    var vm = this;   
    vm.commissionPlans = $scope.commissionPlans; 
  }  
  
 
/**
* data
*/
const serverData = {
	planDropdownOptions: [
      {id:'0', name:"( no plan selected )"}, 
    	{id:'1', name:"Vehicle Sales Plan"}, 
      {id:'2', name:"Parts Sales Plan"}, 
    ], 
	commissionPlans: [
	{ 
  	lastName: "Bell",
    firstName: "Eric", 
  	department: "Sales Department", 
    plans: this.planDropdownOptions, 
    currentPlan: '0'
  },
	{ 
  	lastName: "Habel", 
    firstName: "Brian", 
  	department: "Sales Department", 
    plans: this.planDropdownOptions, 
    currentPlan: '2'
  },
	{ 
  	lastName: "Jacobs", 
    firstName: "Jim", 
  	department: "Sales Department", 
    plans: this.planDropdownOptions, 
    currentPlan: '0'
  },  
	{ 
  	lastName:...