ng-repeatには存在しないデータが表示されています

Question

私は関数を通してデータロードを動的に使用してから、ng-repeatを使用してデータを読み込みます。

以下はコントローラコードです。

$scope.loadproducts = function(item_id) { 

     var pdata = $.param({ 
      item_id : item_id, 
     }); 

     $http({ 
      method: 'POST', 
      url: baseurl + 'api/get_items_in_category_cart', 
      data: pdata, 
      headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
     }).then(function successCallback(response) { 
      $scope.items = response.data.products; 
      $scope.description = response.data.description; 
      console.log($scope.items); 
      $timeout(apply_tooltip, 500); 
     }, function errorCallback(response) { 

     }); 
    }; 

初期ページのロード時に表示

<div class="container col-md-6" ng-repeat="item in items"> 
    <div class="panel panel-primary"> 
     <div class="panel-heading"> 
      <h4 class="panel-title">{{ item.title }}</h4> 
     </div> 
     <div class="panel-body"> 
      <div class="col-md-3 col-xs-5"><a href="#" class="thumbnail"><img ng-src="{{ item.thumbnail }}"></a></div> 
      <div class="col-md-9" style=""> 
       <div class="row"> 
        <div class="col-md-12"> 
         <span style="font-size: 14px; font-weight: 500;">{{ item.description }}</p> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-md-4 text-right" style=" text-align: left;"> 
         <p>{{item.price | currency:"NZ $"}}</p> 
        </div> 
        <div class="col-md-8" style=" text-align: left;"> 

         <input type="text" value="{{item.qty}}" style="width:50px; height: 28px; line-height: 28px;" readonly id="qty_{{item.id}}"/> 

        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

コードは、行うことになっているものを行います。 ユーザーが別のページに移動するための続行ボタンがあります。 ユーザーが元に戻った場合、アイテムは再び読み込まれるはずです。

問題は、各アイテムの数量を表示するテキストボックスをリロードする際に発生します。 - >> value = "{{item.qty}}"は、すべてのqtyテキストボックスの数量を彼らが持っていた元の数量。

console.log（$ scope.items）は、想定される適切な値を示します。それは間違ったqtyを表示しているディスプレイだけです。

アイデアはありますか？

Answer 1

データが正しくロードされている場合は、次の2つの方法で行くことができます：

1 - あなたは「読み取り専用を削除するか

<input type="text" ng-model="item.qty" style="width:50px; height: 28px; line-height: 28px;" readonly id="qty_{{item.id}}"/> 

あなたの入力にNG-モデルを使用してみてください'プロパティを追加し、ng-disabled = "true"を追加します。

2 - 新しい値を取得する前にリストをクリアすることができます。したがって、バックエンドから値を再読み込みする前に、データを消去するだけで済みます。

$scope.items = []; 

リクエストが完了したらデータをもう一度入力します。

この2番目の解決策は従来の方法ではないため、別の解決策が見つからない場合に使用する必要があります。