JSFiddle - React, Tailwind, and code Playground

by Mike Jacobson

HTML

<div ng-app="myapp">

  <div ng-controller="myctrl as ctrl">
    <div ng-repeat="condition in ctrl.conditions" my-custom-row>
    </div>

    <div>
      <button ng-click="ctrl.addCondition()">Add</button>
    </div>

</div>
</div>

JavaScript

angular.module('myapp', [])
	.controller('myctrl', MyCtrl)
	.directive('myCustomRow', myCustomRow);

function MyCtrl() {
	this.conditions = [];
  let count = 0;
  
  this.addCondition = () => {
  	this.conditions.push({
     id: ++count
    });
  };
  
  this.removeConditionByIndex = index => {
  	this.conditions.splice(index, 1);
  };

}
function myCustomRow() {
	return {
  	restrict: 'EA',
  	template: `
    	<div>
      	Condition ID: {{ condition.id }}
      </div>
      <button ng-click="ctrl.removeConditionByIndex($index)">Remove Me</button>
      <hr>
    `
  }
}