javascript - 记住 AngularJS 中选项卡之间的计数

Question

我在移动应用程序中使用 AngularJS。用户能够将产品添加到订单中。但是我使用了不同的选项卡，以便用户可以在类别之间切换，并且对于每个类别，都会显示属于该类别的产品。这些产品可以添加到他/她的订单中。如果用户单击“+”，产品将被添加，并且 de“+”变为 1。如果用户再次单击，则 1 变为 2，等等......这很好用，但是当用户单击另一个选项卡查看时另一个类别的产品，然后返回到上一个选项卡，所有产品的数量都回到“+”，但应该是 1 或 2 或 3 或......如果用户已经将此产品添加到他的订单中。

示例

因此，在添加了“Frappes”类别的一些产品之后，用户更改为 Ice tea 类别，并且在返回到“Frappes”之后，他之前添加的产品仍应被标记，但如您所见，情况并非如此。 .

AngularJS

//COMPOSE ORDER ADD/REMOVE/UPDATE 
    $scope.productRemove = function($event, pid){
        $scope.productid = pid;
        if($scope.order.length > 0)
        {
            for(var b = 0; b<$scope.order.length;b++){
               if($scope.order[b].prodid == pid)
               {
                   if($scope.order[b].aantal > 1)
                   {
                      $scope.order[b].aantal--;
                      document.getElementById('aantal').innerHTML = document.getElementById('aantal').innerHTML - 1;
                   }
                   else
                   {
                       $scope.order.splice(b,1);
                       document.getElementById('aantal').innerHTML = '+';
                       //update quantity in app UI!
                   }
               }
            }
        }
    }
    $scope.productAdd = function($event,pname, pid, pprice) {
        $scope.pzelfdeid = -1;
        $scope.pzelfde = -1;
        $scope.prodname = pname;
        $scope.prodid = pid;
        $scope.price = pprice;
        if($scope.order.length == 0){
            $scope.order.push({prodid: $scope.prodid, prodname: $scope.prodname, aantal: 1, price: $scope.price, size: 'M', extras: ''});
            $event.currentTarget.innerHTML = 1;
        }        
        else if($scope.order.length > 0){
            for(var b = 0; b<$scope.order.length;b++)
            {
                if($scope.order[b].prodid == pid)
                {
                    $scope.pzelfdeid = $scope.order[b].prodid;   
                    $scope.pzelfde = b;
                }
            }
            if($scope.pzelfde > -1)
            {
                $scope.order[$scope.pzelfde].aantal++;
                $event.currentTarget.innerHTML = $scope.order[$scope.pzelfde].aantal;             
            }
            else
            {
                $scope.order.push({prodid: $scope.prodid, prodname: $scope.prodname, aantal: 1, price: $scope.price, size: 'M', extras: ''});
                $event.currentTarget.innerHTML = 1;               
            }
        }

    }

HTML

  <ons-template type="text/ons-template" id="lattes.html">
      <ons-carousel swipeable overscrollable auto-scroll style="height: 100%; width: 100%;">
        <ons-carousel-item>  
          <ons-list>  
            <ons-list-item ng-repeat="product in products | filter:search | orderBy: 'category'">
                <ul>
                 <li><a href="#" id="aantal" ng-click="productAdd($event,product.name, product.id, product.price)">+</a></li>
                 <li>
                    <ons-col width="100%">
                        <div class="name">
                          {{product.name}}
                        </div>
                    <div class="desc">
                        {{product.description}}
                        </div>
                    </ons-col>
                 </li>
                 <li><a href="#" id="aantal"  ng-click="productRemove($event, product.id)">-</a></li>                    
                </ul>
            </ons-list-item>
          </ons-list>
      </ons-carousel-item>
        </ons-carousel>
    </ons-template>

那么有什么办法可以妥善解决这个问题吗？

Answer 1

“存储”在 Controller 上的数据仅在 Controller 实例有效时才有效。当您更改选项卡/ View 时，将创建 Controller 的新实例，因此当前选择将丢失。

您可以使用 Angular 服务来保存在用户 session 期间持久保存的信息。或者换句话说，服务只会在每个应用程序中实例化一次，因此存储在服务中的值不会在 View 更改时丢失。

一个好的开始是阅读 angular services .

在您的示例中，您将创建一个服务来抽象处理产品的逻辑 => addProduct 和 removeProduct:

angular.module(...).factory('Products', function() {

  var products = [];

  return {
    add: function() {
      // ...
    }

    remove: function() {
      // ...
    }

    getAll: function() { return products; }
  };
})

然后您可以将服务注入(inject) Controller 并访问其方法:

.controller('SomeController', function(Products) {

  $scope.products = Products.getAll();
})