How to load form with values based on Angular $resource

Question

I want CRUD operations so that when a user clicks on any particular item to edit this form will be filled with those values (that the user wants to edit).

Here is my code .

storeView.html

<tr data-ng-repeat="store in stores | filter:search | orderBy:'name'">


                <td>
                    {{ store.name }}
                </td>

                <td class="icons-width">
                    <a href="#/Store/edit/{{store._id}}" id="edit"  data-toggle="tooltip">
                        <i class="fa fa-pencil fa-fw colorInfo" ></i>

                    </a>

                    <a ng-click="deleteStore(store._id)"  id="delete"  data-toggle="tooltip">
                    <i class="icon-trash"></i>
                    </a>

                </td>

            </tr>

So when a user clicks on edit for a particular store it will go to another view which has the a form that will show which values the user wants to edit.

storeformView.html

form class="form-horizontal" name="store_form" novalidate ng-submit='AddStore()'>
                <div class="modal-header">
                    <h3>Create/Edit Store</h3>
                </div>

                <div class="modal-body">
                    <div class="form-group">
                        <label for="store_Name" class="col-lg-4 form-label">Name:</label>
                        <div class="col-lg-7">
                            <input type="text" class="form-control" ng-model="store.name" id="store_Name" name="store_Name" placeholder="Store Name" required/>
                            <div class="error" ng-show="store_form.store_Name.$dirty && store_form.store_Name.$invalid">
                                <small class="error errorFields" ng-show="store_form.store_Name.$error.required">
                                    Store Name is required.
                                </small>

                            </div>

                        </div>
                    </div>

                    <div class="form-group">
                        <label for="store_AddressLine1" class="col-lg-4 form-label">Address Line 1:</label>
                        <div class="col-lg-7">
                            <input type="text" class="form-control" ng-model="store.address1" id="store_AddressLine1" name="store_AddressLine1" placeholder="Address Line 1" required/>
                            <div class="error" ng-show="store_form.store_AddressLine1.$dirty && store_form.store_AddressLine1.$invalid">
                                <small class="error errorFields" ng-show="store_form.store_AddressLine1.$error.required">
                                    Address is required.
                                </small>

                            </div>
                        </div>
                    </div>



                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" ng-disabled="store_form.$invalid">
                        <i class="icon-ok-sign icon-white"></i> Save
                    </button>
                <a class="btn btn-default" href="#/Stores">
                    <i class="icon-remove-circle" ></i>
                    Cancel
                </a>

            </div>

        </form>

storeFactory.js

app.factory('Store', function ($resource) {
    return {
        getAllStores   :  $resource("/store/list" ,{},{ TypeGetStores:{method: 'get', isArray:true}}),
        getStore       :  $resource("/store/:id" ,{id : @id},{ TypeGetStore:{method: 'get'}}),

    };
});

app.js

var app = angular.module('myApp', ['ngCookies','ngResource', 'ngRoute']);

app.config(function ($routeProvider) {
    $routeProvider

        .when('/Stores',
            {

                templateUrl: '/app/partials/StoresListView.html'
            })

        .when('/Store/edit/:storeId',
            {

                templateUrl: '/app/partials/StoreFormView.html'
            })



        .otherwise({ redirectTo: '/Login' });
});

Answer 1

For loading information about your store, you can use resolve parameter in routeProvider :

.when('/Store/edit/:storeId',
    {
    templateUrl: '/app/partials/StoresListView.html',
    resolve: {app: function($scope,Store,$routeParams) {
        $scope.store = Store.getStore({id:$routeParams.id})
        }
    }

If everything is right and that's how your factory will work (if that function really returns store. Maybe it returns JSON with root, then you should specify, how to get store from that JSON), than you will have $scope.store in your controller, and it will be two-way-binded with what you have in form.

Note: page will load only after resolve is fully done.