Question

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

示例

enter image description here

因此，在添加了一些“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。

在您的示例中，您将创建一个服务来抽象处理产品的逻辑=＆gt; 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用于应用程序范围的变量。这些是可以视为应用程序模型的单例对象。当控制器作为参数传递服务时，它们会接收对对象的引用，它们可以用来操作状态。 e.g。

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

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

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

工作jsfiddle。

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

2 个答案: