记住AngularJS中标签之间的计数

Question

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

示例

因此，在添加了“Frappes”类别的一些产品后，用户更改为“冰茶”类别，在返回“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

“存储”在控制器上的数据仅在控制器实例有效时才有效。当您更改选项卡/视图时，将创建一个新的控制器实例，因此当前选择会丢失。

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

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

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

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

  var products = [];

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

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

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

然后您可以将服务注入控制器并访问其方法：

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

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

Answer 2

考虑将serrvices 用于应用程序范围的变量。这些是您可以将其视为应用程序模型的单例对象。当控制器将服务作为参数传递时，它们会收到对对象的引用，可以使用该对象来操纵状态。例如

angular.module('main', [])

.controller('ctrl', function($scope, myService) { 
    $scope.data = myService;
})

.controller('ctrl2', function($scope, myService) { 
    $scope.data = myService;
    $scope.changedata = function() { 
        $scope.data.variable = 456; // will update myService's variable to 456 when called
    }
})

.factory('myService', function() {return { variable: 123 }; });

Sopme HTML 代码通过ng-click 更改服务变量并查看效果：

<div ng-app="main">
    <div ng-controller="ctrl">{{data.variable}}</div>
    <div ng-controller="ctrl2" ng-click="changedata()">{{data.variable}}</div>    
</div>

工作jsfiddle。