使用AngularJS添加/编辑数据的最佳实践

发布时间：2020-12-17 16:57:20 所属栏目：安全来源：网络整理

导读：我目前正在使用AngularJS开发SPA应用程序,该应用程序允许最终用户添加通过表单编辑订单. 我想知道的是确定应用程序是处于编辑还是创建状态的最佳实践？例如,当我点击一个名为“添加新订单”的菜单项时,我希望显示一个名为“order.html”的部分视图,其中所有

我目前正在使用AngularJS开发SPA应用程序,该应用程序允许最终用户添加&通过表单编辑订单.

我想知道的是确定应用程序是处于编辑还是创建状态的最佳实践？

例如,当我点击一个名为“添加新订单”的菜单项时,我希望显示一个名为“order.html”的部分视图,其中所有输入字段都是空白的.如果可能的话,我还想在编辑订单时重复使用相同的视图,其中包含从当前正在编辑的订单预先填写的输入字段.

我是否需要使用具有确定状态属性的服务/工厂,例如：

angular.module('app')
    .factory('orderService',['$http',function($http) {
        var state = {
            addOrder: false,order: {
                orderRef: "",orderDate: ""
            }
        };
    }]);

然后我可以根据编辑状态从相关控制器设置addOrder属性,并在addOrder：true时填写order属性和订单的详细信息.

我已经环顾网了,不幸的是,这样的例子似乎很少.

解决方法

我目前正在使用一个服务(DataRepo),它存储您想要全局保存的所有数据.例如,您有一个输入,用户可以输入关于订单的一些附注,如果他们导航回到这个站点,他们可能会再次看到他们的文本.

<input type="text" ng-model="DataRepo.orderNotes">

在控制器中,注入DataRepo服务并将其绑定到范围：

$scope.DataRepo = DataRepo;

通过这样做,用户输入将自动存储到DataRepo服务中.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!