JSFiddle - React, Tailwind, and code Playground

by witq

HTML

<div ng-controller="AppController as app">
  <div ng-form="root">
    <div items ng-model="app.list.items" data-service="app.list" min-items="2"></div>
  </div>
  <pre ng-bind="root | json"></pre>
</div>

Babel + JSX

const App = angular.module('App', []);

function AppController(List) {
  this.list = new List();
}

function itemsDirective() {
  return {
    template: `
    	<button type="button" ng-click="service.add()">Add</button>
    	<ul>
      	<li ng-repeat="item in list">
        	<div ng-form="item-{{$index}}">
        	<input type="text" name="name" ng-model="item.name" required>
          <div ng-form="nested">
          	<input type="text" name="subname" ng-model="item.subname" required>
          </div>
          <button type="button" ng-click="service.delete($index)">Remove</button>
          </div>
          </li>
      </ul>
    `,
    require: 'ngModel',
    scope: {
    	service: '=service'
    },
    link: function postLink(scope, element, attrs, ngModel) {
      ngModel.$render = function() {
        scope.list = ngModel.$viewValue;
      };
    }
  }
}

function ListFactory() {
  class List {
    constructor() {
      this.items = [];
    }
    add() {
      this.items.push({
        name: '',
        subname: ''
      });
    }
    delete(index) {
      return this.items.splice(index, 1);
    }
  }

  return List;
}

App
  .directive('items', itemsDirective)
  .factory('List', ListFactory)
  .controller('AppController', AppController);

angular.element(document).ready(function() {
  angular.bootstrap(document, ['App']);
});