JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.angularjs.org/1.3.11/angular.min.js"></script>
<script type="text/template" id="myDirTemplate">
<div>
<select ng-if="tmpl.type == 'select'" ng-model="$parent.ngModel" ng-options="option.id for option in tmpl.options"></select>
<input ng-if="tmpl.type == 'text'" type="text" ng-model="$parent.ngModel.description" />
</div>
</script>
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="part in obj.parts">
<div ng-repeat="field in fields" my-dir ng-model="$parent.obj.parts[$parent.$index]" tmpl="field"></div>
</div>
<button type="button" ng-click="addPart()">Add part</button>
<div>{{obj}}</div>
</body>
CSS
[my-dir] {
display: inline-block;
margin: 5px
}
JavaScript
console.clear();
angular.module("myApp", [])
.controller("myCtrl", ["$scope", function($scope) {
var Part = function(id, description) {
this.id = id || "";
this.description = description || "";
};
$scope.obj = {parts: []};
$scope.parts = [
new Part("foo", "Foo description"),
new Part("bar", "Bar description"),
];
$scope.addPart = function() {
$scope.obj.parts.push(new Part());
};
$scope.fields = [
{type: "select", options: $scope.parts},
{type: "text"}
];
}])
.directive("myDir", [function() {
return {
restrict: "A",
template: document.getElementById("myDirTemplate").innerHTML,
scope: {
ngModel: "=",
tmpl: "="
}
};
}]);