如何使用基于角度$resource的值加载表单

How to load form with values based on Angular $resource

本文关键字:加载 表单 resource 何使用 于角度      更新时间:2023-09-26

我想要 CRUD 操作,以便当用户单击任何特定项目进行编辑时,此表单将填充这些值(用户想要编辑的值)。

这是我的代码.

商店视图.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>

因此,当用户单击特定商店的编辑时,它将转到另一个视图,该视图具有一个表单,该表单将显示用户想要编辑的值。

商店窗体视图.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>

商店工厂.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'}}),
    };
});

应用.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' });
});

要加载有关商店的信息,您可以在routeProvider中使用resolve参数:

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

一切正常,这就是您的工厂的工作方式(如果该函数真的返回 store。也许它返回带有root的JSON,那么您应该指定如何从该JSON获取存储),而不是控制器中的$ scope.store,并且它将与您在表单中拥有的内容双向绑定。

注意:页面仅在resolve完全完成后加载。