Reusing a html form to add and edit data in Angularjs

Question

I've been learning AngularJs recently, and was wondering if there is a way to solve the below problem.

I have a page called cardetails.html that displays some car details such as name, make, model etc. The data gets populated from a service that looks upon the session storage. So, when the app is run for the first time, only the 'add' link is visible. Clicking on 'add' will navigate the user to a page called 'CarDetailsForm.html' that contains the form to add data.

When the form is submitted, data will be stored in session storage and the user will be navigated back to the cardetails.html, and the car details will be visible this time along with the edit link. Now, I need to find a way to reuse 'CarDetailsForm.html' for editing as well. When, the user clicks on edit link, the form should open along with the populated data in form elements. I have done most of the work, but not sure about how to implement 'Edit' feature properly. I found the below link helpful, but I'm trying to avoid creating the same form elements twice.

Angular JS - Edit In Place Content Editing

One other issue is that when the user hits 'back' on the browser from cardetails.html to 'CarDetailsForm.html' just after an edit, the data should still persist on the form. How can I achieve this ?

Also, i'm not sure whether using custom directives is necessary to solve this problem. Any help or advice would be much appreciated. Thanks

Updated the code with the solution (just had to use model binding)

Below is the markup for cardetails.html

<div ng-controller="carDetailsCtrl">
    <div>Car Details</div>
    <div ng-show="hasData">     
        <ul>
            <li>{{carDetails.name}}</li>  
            <li>{{carDetails.make}}></li>          
        </ul>
    </div>
    <div ng-hide="hasData"><a href="#carDetailsForm">add</a></div>
    <div ng-show="hasData"><a href="#carDetailsForm">edit</a></div>
</div>

CarDetailsForm.html

<form ng-submit="submit()" ng-controller="carDetailsFormCtrl">
<input type="text" id="name" required="required" ng-model="formData.name">
<input type="text" id="make" required="required" ng-model="formData.make">
<input type="submit" id="submit" value="submit" />
</form>

Below are my scripts.

app.config([
    '$routeProvider', function ($routeProvider) {
        $routeProvider.            
            when('/carDetailsForm', { templateUrl: 'CarDetailsForm.html' }).
            //when('/carDetailsForm:carDetails', { templateUrl: 'CarDetailsForm.html' }).
            otherwise({
                templateUrl: 'cardetails.html'
            });
    }
]);


    app.factory('carDetailsService', function () {
        return {
            get: function(key) {
                return sessionStorage.getItem(key);
            },
            set: function(key, value) {
                sessionStorage.setItem(key, JSON.stringify(value));
            },
            remove: function(key) {
                sessionStorage.removeItem(key);
            },
            clearAll: function() {
                sessionStorage.clear();
            }
        };
    });

app.controller('carDetailsCtrl', ['$scope', 'carDetailsService', function ($scope, carDetailsService) {

    var carDetailsInfo = carDetailsService.get("carDetailsInfo");

    $scope.carDetails = JSON.parse(carDetailsInfo);

    $scope.hasData = false;
    if ($scope.carDetails) {
        $scope.hasData = true;
    }
}]);

app.controller('carDetailsFormCtrl', [
    '$scope', 'carDetailsService', '$location', '$routeParams', function($scope, carDetailsService, $location, $routeParams) {
        $scope.formData = JSON.parse(carDetailsService.get("carDetailsInfo")) || {} ;
        //$scope.formData = $routeParams;
        $scope.submit = function() {
            carDetailsService.set("carDetailsInfo", $scope.formData);
            $location.path('/cardetails');
        };
    }
]);

Answer 1

Instead of having two unique routes that load the same templateUrl, you should have one route which accepts a carDetailsInfo object and binds it to the form, but has an empty object as the default. Then you call the same route for both button actions, passing in your object for the edit but not passing it for the new.

sample code to handle passing data:

$routeProvider.
        when('/editCarDetails:carDetailsInfo', { templateUrl: 'CarDetailsForm.html' })

app.controller('carDetailsFormCtrl', [
'$scope', 'carDetailsService', '$routeParams', '$location', 
           function($scope, carDetailsService, $routeParams, $location) {

$scope.formData = $routeParams;

from Angular Docs