angular.module('print', []).
controller('Ctrl', function($scope) {
$scope.settingData = [{
"currency": "RM",
"fields": {
"type": "",
"cost": "",
"pax": "1"
}
}]
$scope.addNewFields = function() {
var row = $scope.settingData.length;
if (row < 3) {
$scope.settingData.push(row);
}
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="print" ng-controller="Ctrl ">
<button ng-click="addNewFields()">Add</button>
<br />
<br />
<div class="editSection">
<div class="inputRowWrap" ng-repeat="data in settingData">
{{data.fields.type}} {{data.fields.cost}} {{data.fields.pax}}
<div class="row">
<div class="col col-40">
<label class="item item-input">
<input type="text" placeholder="Room Type #{{$index+1}}" ng-model="data.fields.type">
</label>
</div>
<div class="col col-40">
<label class="item item-input">
<input type="text" placeholder="RM" ng-model="data.fields.cost">
</label>
</div>
<div class="col">
<select ng-model="data.fields.pax">
<option>pax</option>
<option value="1">1 pax</option>
<option value="2">2 pax</option>
</select>
</div>
</div>
</div>
<div class="padding saveBtnWrap">
<button ng-click="saveSetting()">Save</button>
</div>
</div>
</div>I implemented a feature to dynamically add new HTML elements, however, I encountered an issue where the new input fields were not functioning as expected. It seems that my attempt to add a new array object to the existing array object was unsuccessful.