2016-07-06 9 views
0

ich derzeit Smart Table verwenden,Persistierende Daten zwischen View States AngularJS mit Smart Table

so weit alles ist wie ein Zauber funktioniert. Es ist der Workflow, den meine Webanwendung benötigt, der mein Problem verursacht.

Meine Anwendung hat zwei Zustände

  1. New Order
  2. Heutige Bestellung

Hat nicht hart erscheinen, aber das ist, wo es beginnt schwierig zu bekommen. Ich kann die Daten in der neuen Reihenfolge filtern und wählen, was ich will und es auf die API ohne Problem auslösen.

Sein Zustand 2, wo ich den Fehler der Rückkehr mit vorhandenen Daten im Raster und es jetzt "isSelected" erhalten. Außerdem können sie den ausgewählten Objekten weitere Objekte hinzufügen und sogar diese alten Objekte entfernen.

Ich habe versucht, dies mit einem $ Watcher und ohne Glück, aber es funktioniert für einen einfachen Teil von dem, was ich brauchte.

$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); 

Dieser Teil funktioniert gut und lässt mich sehen, wenn Daten in der „selectedItem“ Array und fügen Sie die Summen aus allen Neuzugängen aktualisiert.

Ich möchte etwas ähnliches tun, aber aktuelle Elemente auswählen und erlauben Menschen neue Elemente zu den ausgewählten Elementen hinzuzufügen. All dies wird natürlich auf DOM-Ebene gehandhabt.

Was wäre der beste Weg, dies mit Smart Table zu tun, ich habe eine Menge verschiedener Optionen durchlaufen und alles, was Smart Table bietet, scheint keine Lösung für dieses Problem zu bieten, und ich möchte so viel verwenden wie ich von diesem Modul kann.

jede Hilfe wird sehr geschätzt!

+0

Haben Sie versucht, eine Fabrik zu verwenden, um Ihre Daten zu erhalten? – Ohjay44

+0

@ Ohjay44 Ich habe eine Fabrik, die arbeitet, um alle meine API-Aufrufe aufzurufen, und das ist es. – Keeano

+0

Sie können diese Fabrik verwenden, um Daten zwischen Ansichten/Zustand persistent zu machen, ich werde ein Beispiel geben. – Ohjay44

Antwort

0

Wie andere angegeben haben, können Sie einen Dienst verwenden, um Daten über Bundesstaaten, Ansichten, Controller, andere Dienste und Fabriken hinweg auszutauschen. Sehen Sie dieses Beispiel https://plnkr.co/edit/YKlIx1t32QopPCfpiF7n?p=preview und dieses Skript. Wenn Sie mehrere eckige Module in Ihrem Projekt haben, können Sie Ihren Service selbst als eigenständiges Modul einrichten und in andere Module einfügen. Der Einfachheit halber ist dieses Beispiel in einem Modul und einer HTML-Seite enthalten:

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(); 
    }