Question

我如何使用计数器来表示ng-repeat值？。我使用了2个函数的加减量，并在控制器中调用了这些函数。问题是当我点击添加或减去时，所有 ng-repeat数据的计数器会增加或减少。 我想增加或减少每种产品的数量。。可以有人发布示例代码或下面的截图吗？

Screenshot

controller.js

    .controller('grocery', function($scope, $http) {

    $http.get('/groceryjson.json')
        .success(function(response) {
            $scope.mydata = response;
            $scope.booking = [];

            $scope.toggle = function(image) {
                $scope.selectedImage = image.product_name;
                $scope.selected_can_rate = image.can_rate;
                $scope.product_name = image.product_name;
                /* $scope.register.product_name = image.product_name;*/
                $scope.can_path = image.can_path;
                /*$scope.register.can_path = image.can_path;*/

                $scope.booking.push(image)

                console.log($scope.booking);

            };
        })

    $scope.myEvent = function() {
        window.location = "#/app/booking";
    }
    $scope.canqty = 0;

    $scope.addqty = function(no){
    $scope.canqty++
}

$scope.subqty = function(no){
    if($scope.canqty >=1){
    $scope.canqty-- 
    }


};
})

grocery.html

<ion-view view-title="Grocery">
    <ion-floating-button ng-click="myEvent()" has-footer="false" button-color="#2AC9AA" icon="ion-plus" iconColor="#fff">
    </ion-floating-button>
    <ion-content>
        <div class="row" ng-click="toggle(image)" ng-repeat="image in mydata">
            <div class="col col-30 grocery-img">
                <img src="{{image.can_path}}" alt="{{image.product_name}}">
            </div>
            <div class="col col-30">
                <div class="grcoery-header">
                    {{image.product_name}}
                </div>
                <!-- <div class="grocery-desc">
                    {{data.desc}}
                </div> -->
            </div>
            <div class="col col-40">
                <div class="grocery-buy">
                    <a class="button buy">Add</a>
                </div>
            </div>
        </div>
        <div class="row" ng-repeat="data in booking track by $index">
            <div class="col col-40">
                <img src="{{data.can_path}}" alt="{{data.product_name}}" style="width:100px;">
            </div>
            <div class="col col-60">
              <div class="row">
              <div class="col col-30">
                <button class="add" ng-click="addqty(no)"></button>
              </div> 
              <div class="col col-30" >
                 <div class="canqty-2">{{canqty}}</div>
              </div>
              <div class="col col-30">
                <button class="minus" ng-click="subqty(no)"></button>
              </div>
              </div>
            </div>
        </div>
      </ion-content>
     </ion-view>

Answer 1

这里的问题是您尝试更改附加到$ scope主体的变量，不包含在您的对象中。所以这样的事情应该有效：

查看：

＆＃13;

<div class="row" ng-repeat="data in booking track by $index">
            <div class="col col-40">
                <img src="{{data.can_path}}" alt="{{data.product_name}}" style="width:100px;">
            </div>
            <div class="col col-60">
              <div class="row">
              <div class="col col-30">
                <button class="add" ng-click="addqty(data)"></button>
              </div> 
              <div class="col col-30" >
                 <div class="canqty-2">{{data.canqty}}</div>
              </div>
              <div class="col col-30">
                <button class="minus" ng-click="subqty(data)"></button>
              </div>
              </div>
            </div>
        </div>

＆＃13;

控制器：

＆＃13;

    $scope.addqty = function(data){
        data.canqty++
    }
    
    $scope.subqty = function(data){
        if($scope.canqty >=1){
        data.canqty-- 
   }

＆＃13;

如何选择ng-repeat值的数量

1 个答案: