AngularJS Component

by David DeLella

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<div ng-app="app">
  <component></component>
</div>

Babel + JSX

class ComponentCtrl {
  constructor() {}
  
  referenceTypes: Array<any> = [
    { label: 'Customer Reference', show: 1 },
    { label: 'PO Number', show: 1 },
    { label: 'SO Number', show: 1 }
  ]
  addReferenceType = () => {
  	alert('hello');
    this.referenceTypes.filter(option => option.label == this.referenceType)[0].show = 0;
  }
}
let MyComponent = {
  bindings: {
    text: '@',
    referenceType:'@',
    referenceTypes:'@'
  },
  controller: ComponentCtrl,
  template: `
    <select ng-model='$ctrl.referenceType'
            ng-options="option.label as option.label for option in $ctrl.referenceTypes | filter: {show: 1}">
      <option value=""></option>
    </select>
    <a class="btn btn-default btn-primary" ng-click="$ctrl.addReferenceType()">
      Use
    </a>`
}
angular.module('app', [])
  .component('component', MyComponent);