Looking to develop a dynamic page where various forms can be loaded upon button press. Each button triggers the addition of a new form with unique input fields corresponding to that button. The objective is to ensure that forms load in the sequence of button presses, with each form having distinct input fields based on the button clicked.
Check out my progress on Plunker:
http://plnkr.co/edit/OQYmoi99K1BZl4YwIMGG?p=preview
HTML
<ul>
<div ng-repeat="form in forms">
<div ng-if="showTransport(form)">
<li class="list-group-item">
<div>{{from.name}} Name:
<input type="text" class="xdTextBox" ng-model="form.fields.tName" /> Comment:
<input type="text" class="xdTextBox" ng-model="form.fields.tComment" />
</div>
</li>
</div>
<div ng-if="showLodging(form)">
<li class="list-group-item">
<div>{{from.name}} Name:
<input type="text" class="xdTextBox" ng-model="form.fields.lName" /> Comment:
<input type="text" class="xdTextBox" ng-model="form.fields.lComment" />
</div>
</li>
</div>
</div>
</ul>
JavaScript
var app = angular.module('myApp', []);
var frmCnt = 0;
app.directive('ngIf', function() {
return {
link: function(scope, element, attrs) {
if(scope.$eval(attrs.ngIf)) {
// remove '<div ng-if...></div>'
element.replaceWith(element.children())
} else {
element.replaceWith(' ')
}
}
}
});
app.controller('MainCtrl', function($scope) {
$scope.forms = [{
name: "form_1",
type: 't',
fields: [{
tName: '',
tComment: ''
}]
}];
$scope.addTransport = function() {
frmCnt++;
$scope.forms.push({
name: "form_" + frmCnt,
type: 't',
fields: [{
tName: '',
tComment: ''
}]
});
}
$scope.addLodging = function() {
frmCnt++;
$scope.forms.push({
name: "form_" + frmCnt,
type: 'l',
fields: [{
lName: '',
lComment: ''
}]
});
}
$scope.showTransport = function(form) {
return form.hasOwnProperty("type=='t'")
}
$scope.showLodging= function(form) {
return form.hasOwnProperty("type=='l'")
}
});
I'm encountering difficulties in making it run smoothly. Any guidance or tips will be highly valued.