使用智能表在视图状态 AngularJs 之间持久化数据

Persisting Data between View States AngularJs with smart Table

本文关键字：AngularJs 之间 持久化 数据 视图状态 智能      更新时间：2023-09-26

>我目前正在使用智能表格，

到目前为止，一切都像魅力一样工作。是我的 Web 应用程序所需的工作流导致了我的问题。

我的应用程序有两种状态

  1. 新订单
  2. 当前订单

似乎并不难，但这就是它开始变得棘手的地方。我可以过滤新订单中的数据并选择我想要的内容，然后毫无问题地将其触发到 API。

它的状态 2，我收到返回网格中现有数据的错误，现在它被"被选中"。此外，他们还能够向所选项目添加更多项目，甚至删除这些旧项目。

我尝试过用$watcher访问它，但没有运气，但它确实适用于我需要的简单部分。 

 $scope.$watch('ctrl.selectedItem', function (newVal) {
        _.filter(newVal, function (item) {
            //add totals for the blocks
            if (item.isSelected) {
                Order.totals.planted = workOrder.totals.planted + item.Planted;
                Order.totals.treatable = Order.totals.treatable + item.Treatable;
                Order.totals.rowarea = Order.totals.rowarea + item.RowArea;
                Order.totals.gross = Order.totals.gross + item.Gross;
            } else {
            }
        });
    }, true);

这部分效果很好，让我看到"selectedItem"数组中的数据何时更新，并将所有新项目的总计相加。

我想做类似的事情，但选择当前项目并允许人们向所选项目添加新项目。当然，所有这些都是在 DOM 级别处理的。

使用智能表

执行此操作的最佳方法是什么，我已经经历了许多不同的选项，智能表提供的所有内容似乎都没有提供解决此问题的方法，我想尽可能多地使用这个模块。

任何帮助将不胜感激！

正如其他人所说，您可以使用服务跨状态、视图、控制器、其他服务和工厂共享数据。请参阅此 plunker 示例 https://plnkr.co/edit/YKlIx1t32QopPCfpiF7n?p=preview 和此脚本。如果您的项目中有多个角度模块，您甚至可以将服务本身设置为独立模块，并将其注入其他模块。为简单起见，此示例包含在一个模块和 HTML 页面中： 

angular.module('orderExample', [])
        .factory('orderTrackingService', orderTrackingService)
        .controller('NewOrderController', NewOrderController)
        .controller('CurrentOrderController', CurrentOrderController);

    /* Service */
    function orderTrackingService() {
        var order = {
            selectedItems: [],
            totals: {
                planted: 0,
                treatable: 0,
                rowarea: 0,
                gross: 0
            }
        };
        return  {
            getOrder: getOrder,
        };
        function getOrder() {
            return order;
        }
    }
    /* State 1 Controller */
    NewOrderController.$inject = ['orderTrackingService'];
    function NewOrderController(orderTrackingService) {
        this.order = orderTrackingService.getOrder();
        this.selectItem = selectItem;
        this.newItem = {};
        /* call this from View on select */
        function selectItem(item) {
            this.order.selectedItems.push(item);
            this.order.totals.planted += item.planted;
            this.order.totals.treatable += item.treatable;
            this.order.totals.rowarea += item.rowarea;
            this.order.totals.gross += item.gross;
            this.newItem = {};
        }
    }

    /* State 2 Controller */
    NewOrderController.$inject = ['orderTrackingService'];
    function CurrentOrderController(orderTrackingService) {
        /* Gets reference to object from service. All changes to object properties will reflect here */
        this.order = orderTrackingService.getOrder();
    }
相关文章：