<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-app="angularjs-starter" ng-controller="addRemoveVehicleCntrlr">
<form name="registrationform">
<div style="background:#cecece; padding:10px;">
<div style="background:#EBEBEB; padding:10px; margin-bottom:3px" data-ng-repeat="vehicle in vehicles">
<input type="text" ng-model="vehicle.name" name="" placeholder="Enter mobile number">
<input type="button" value="Review" ng-click="getdetail(vehicle.name, $index, vehicle.value)" />
<div id="myVal">{{myval}}</div>
<a class="remove" ng-show="vehicles.length > 1" ng-click="removeVehicle($index)">Remove vehicle</a>
</div>
</div>
<button class="addfields" ng-click="addNewVehicle()">Add Vehicle</button>
<button class="addfields" ng-click="reset()">Reset</button>
</form>
</div>
</body>
</html>
// Code goes here
var app = angular.module('angularjs-starter', []);
app.controller('addRemoveVehicleCntrlr', function($scope) {
$scope.vehicles = [{id: 'vehicle1'}];
var allVins=[];
$scope.addNewVehicle = function() {
var newItemNo = $scope.vehicles.length+1;
$scope.vehicles.push({'id':'vehicle'+newItemNo});
// console.log($scope.vehicles);
};
$scope.getdetail= function(name, index, value){
console.log(name+index);
allVins.splice(index, 1, {"vin":name,"trim":value});
console.log(allVins);
$scope.myval=name;
}
$scope.changeDetails = function(index, value){
// allVins.splice(index, 1, {"trim":value});
allVins[index].trim=value
console.log(allVins);
}
$scope.removeVehicle = function(index) {
$scope.vehicles.splice(index,1);
allVins.splice(index,1);
console.log(allVins)
};
$scope.reset = function(){
$scope.registrationform = angular.copy($scope.vehicles);
}
});
/* Styles go here */