Как выбрать количество для значений ng-repeat

angularjs cordova ionic-framework hybrid-mobile-app

289 просмотра

1 ответ

Как я могу использовать счетчик для значений нг-повтор? , Я использовал 2 функции добавления и минус количество и вызвал эти функции в контроллере. Проблема в том, что когда я нажимаю кнопку «добавить» или «минус», счетчик увеличивается или уменьшается для всех данных ng-repeat . Я хочу увеличить или уменьшить количество для каждого продукта. Кто-нибудь может опубликовать пример кода или для скриншота ниже?

Скриншот

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>
Автор: sam Joel Источник Размещён: 08.11.2019 11:00

Ответы (1)


0 плюса

Проблема здесь в том, что вы пытаетесь изменить переменную, которая присоединена к вашему $ scope-принципу, но не содержится в вашем объекте. Так что-то подобное должно работать:

Посмотреть:

<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>

Контроллер:

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

Автор: Gerald Chablowski Размещён: 20.08.2016 07:35
Вопросы из категории :
32x32