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

时间:2016-07-06 21:20:10

标签: javascript angularjs smart-table

我目前正在使用Smart Table

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

我的申请有两种状态

  1. 新订单
  2. 当前订单
  3. 看起来并不难,但这就是它开始变得棘手的地方。 我可以过滤新订单中的数据并选择我想要的内容并将其激活到API,没有任何问题。

    它的状态2,我得到了返回网格中现有数据的错误,现在正在" isSelected"。他们还可以向所选项目添加更多项目,甚至可以删除这些旧项目。

    我试过用$ 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级别处理的。

    使用Smart Table进行此操作的最佳方法是什么,我已经完成了很多不同的选项,Smart Table提供的所有功能似乎都没有为这个问题提供解决方案,我想用作我可以从这个模块中获得。

    非常感谢任何帮助!

1 个答案:

答案 0 :(得分:0)

正如其他人所说,您可以使用服务跨州,视图,控制器,其他服务和工厂共享数据。请参阅此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();
    }