Please, check this JSFiddle. When you add a dim preset, it is added correctly to $scope.packData, but it won't fill correctly the input fields. After that if you try to update the $scope.packData directly from the input field, it won't work. It does only from the dim preset.
What am I missing here?
Below is the code.
var myApp = angular.module('myApp', []);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.packData = [{
length: null,
width: null,
height: null
}];
$scope.addNewpack = function() {
$scope.packData.push({
length: null,
width: null,
height: null
});
};
$scope.removepack = function(index) {
if ($scope.packData.length != 1) {
$scope.packData.splice(index, 1);
}
};
$scope.dimPresets = [{
length: 73,
width: 54,
height: 45,
tare: 2
}, {
length: 11,
width: 11,
height: 11,
tare: 1
}, {
length: 23,
width: 23,
height: 23,
tare: 4
}, {
length: 41,
width: 52,
height: 63,
tare: 6
}];
$scope.fillLastpack = function(length, width, height, tare) {
var lastpack = $scope.packData.length - 1;
$scope.packData[lastpack] = [{
"length": length,
"width": width,
"height": height
}];
}
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="MyCtrl" ng-app="myApp">
<div class="row">
<div class="col-md-6">
<div class="form-inline">
<div class="form-group-sm">
<fieldset data-ng-repeat="pack in packData" style="padding-bottom:5px;">
<label class="control-label col-sm-4">Pack {{$index+1}}: </label>
<input type="number" class="form-control" style="width:80px;" id="length" ng-model="pack.length" name="" placeholder="length">
<input type="number" class="form-control" style="width:80px;" id="width" ng-model="pack.width" name="" placeholder="width">
<input type="number" class="form-control" style="width:80px;" id="height" ng-model="pack.height" name="" placeholder="height">
<button ng-click="removepack($index)" ng-hide="packData.length==1">-</button>
</fieldset>
</div>
</div>
<div class="form-group-sm" style="padding-top:5px;">
<span class="col-sm-4"></span>
<button ng-click="addNewpack()">Add pack</button>
</div>
<div>{{packData}}</div>
</div>
<div class="col-md-6">
<div class="form-group-sm">
<div class="col-sm-6">
<div class="btn-group-sm" uib-dropdown>
<span>Add dim: </span>
<ul>
<li ng-repeat="preset in dimPresets" ng-click="fillLastpack(preset.length, preset.width, preset.height, preset.tare)">
<a href="">{{preset.length}}cm x {{preset.width}}cm x {{preset.height}}cm</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
