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 manage the push to add the new html but the new input is not working, I guess I've failed to add a new array object to my existing array object.
if (row < 3) {
$scope.settingData.push(row);
}
You push an integer into an array of objects. I've updated your fiddle: https://jsfiddle.net/mkcegb80/1/
instead of pushing the index into the array, we need to push an object.
angular.module('print', []).
controller('Ctrl', function($scope) {
var data = {
"currency": "RM",
"fields": {
"type": "",
"cost": "",
"pax": "1"
}
}
$scope.settingData = [angular.copy(data)]
$scope.addNewFields = function() {
var row = $scope.settingData.length;
if (row < 3) {
// create a copy of the data object and push into the array
$scope.settingData.push(angular.copy(data));
}
}
});