Angular Disable/Enable Test

by jacobwsmith

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div class="container" ng-app='app'>
  <div class="row">
    <div class="col-lg-12">
      <products></products>
    </div>
  </div>
</div>

CSS

.disabled{
  opacity: 0.5;
}

JavaScript

console.clear();
angular.module('app', [])
.component('products', {
  template: `
  	<h3>Test</h3>
    <form>
      <div class="checkbox" ng-class="{'disabled': product.disabled}" ng-repeat="product in $ctrl.data">
      	<label>
        	<input type="checkbox"
          	ng-model="product.value"
            ng-disabled="product.disabled"
            ng-change="$ctrl.change(product)"
          > 
          {{product.description}}
       </label> 
      </div>
      <hr>
      <pre>{{$ctrl.data | json}}</pre>
    </form>
  `,
  controller: function() {
    var $ctrl = this;
    $ctrl.data = get();
    $ctrl.change = change;
    
    ///////
    
    // =======================================
    //	Product has changed
    // =======================================
    function change(product){
      // TODO: switch statement here...?
      $ctrl.data.forEach(function(item){
        if(product.code !== item.code){
          item.disabled = product.value;
        }
      }, this);
    }
    // =======================================
    //	Gets the data
    // =======================================
    function get(){
      return [{
        "code": "BRANDEFFECT",
        "description": "Online Brand Effect (OBE)"
      }, {
        "code": "MBE",
        "description": "Mobile Brand Effect ONLY (MBE)"
      }, {
        "code": "VZBEEV",
        "description": "Brand Effect Expanded View (BEEV)"
      }, {
        "code": "SALESEFFECT",
        "description": "Sales Effect (SE)"
      }, {
        "code": "RESPONSEEFFECT",
        "description": "Response Effect (RE)"
      }, {
        "code": "FBE",
        "description": "Facebook Brand Effect (FBE)"
      }, {
        "code": "OCR",
        "description": "Digital Ad Ratings (DAR)"
      }, {
        "code": "VZWE",
        "description": "Watch Effect (WE)"
      }, {
        "code": "ADSAFE",
        "description": "DAR Viewability (IAS)"
      }, {
        "code": "TVBE",
        "description": "TV Brand...