ng-repeat値の数量を選択する方法

Question

ng-repeat値にcounterを使用するにはどうすればよいですか？ 。私は、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

ここでの問題は、あなたが接続されている変数を変更しようということですあなたの$スコーププリンシパルあなたのオブジェクトには含まれません。 だから、そのような何か作業をする必要があります：

ビュー：

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