なぜangularJS 1.xのテーブルに新しいリストを追加できないのですか？

Question

私は項目のリストを作成するはずです。 JSで

<div ng-hide="listTrigger"> 
        <!--FIRST TABLE--> 
        <table class="table table-bordered table-striped"> 
         <thead> 
         <tr> 
          <th sortable="code" class="sortable"> 
           Product Name 
          </th> 
          <th sortable="placed" class="sortable"> 
           Qty 
          </th> 
          <th class="st-sort-disable th-dropdown"> 
           Price 
          </th> 
          <th sortable='total.value' class="sortable"> 
           Split 
          </th> 
          <th> 

          </th> 
         </tr> 
         </thead> 
         <tbody> 
         <tr grid-item> 
          <td width="40%"> 
           <select class="form-control" ng-model="prod.uid"> 
            <option selected disabled>Select Product</option> 
            <option ng-repeat="product in products | orderBy : 'name'" ng-value="product.uid" >{{product.name}}</option> 
           </select> 
          </td> 
          <td width="20%"> 
           <input type="number" min="0" ng-model="prod.qty" class="form-control"> 

          </td> 
          <td width="20%"> 
           <input type="number" min="0" ng-model="prod.price" class="form-control"> 
          </td> 
          <td width="10%"> 
           <input type="number" min="1" max="100" ng-model="prod.split" class="form-control"> 
          </td> 
          <td width="10%"><button ng-click="addNewProduct(prod.id)" class="form-control">Add</button></td> 
         </tr> 
         </tbody> 
        </table> 


    <!--SECOND TABLE--> 
        <table ng-show="newProducts.length!=0" class="table"> 

         <thead> 
         <tr> 
          <th > 
           Product Name 
          </th> 
          <th > 
           Qty 
          </th> 
          <th > 
           Price 
          </th> 
          <th > 
           Split 
          </th> 
          <th> 

          </th> 
         </tr> 
         </thead> 

         <tbody> 
         <tr ng-repeat="newProduct in newProducts"> 
          <td width="60%" ng-bind="newProduct.uid"></td> 
          <td width="10%" ng-bind="newProduct.qty"></td> 
          <td width="10%"ng-bind="newProduct.price"></td> 
          <td width="10%" ng-bind="newProduct.split"></td> 
          <td width="10%"><button ng-show="newProducts.length!=0" ng-click="removeProduct(newProduct.uid)">X</button></td> 
         </tr> 
         </tbody> 
        </table> 

出力 but whatever i type in the textbox of first table is coming just like that in second table. It is supposed to come list by list

私は、オブジェクトPRODに入力フィールドとsettinfからのすべての詳細を取得し、その後、アレイnewProductsにそれを押しています。 後の表では、newProducts配列の項目を繰り返すためにng-repeatを使用しています。トップテーブルとボトムテーブルは他の方法で接続されていないので、入力フィールドで値が変更されたときにボトムテーブルで値がチェージングされるのはなぜわかりません。また、もう一度追加しようとすると、エラーが発生します。ここで

jquery.js:4409 Error: [ngRepeat:dupes] http://errors.angularjs.org/1.4.3/ngRepeat/dupes?p0=newProduct%20in%20newPr…0a-42d3-949e-3e8e59ac2be9%22%2C%22%24%24hashKey%22%3A%22object%3A359%22%7D 

は、私がコンソールにnewProducts配列をログに記録するにconsole.logをしようとした新しいアイテムに

//function to add new product while creating 
     $scope.addNewProduct= function(id){ 
      $scope.newProducts.push($scope.prod); 
      console.log("product array-"+JSON.stringify($scope.newProducts)); 

     } 

を追加するJSで、それは新しい配列で更新しますが、2番目のテーブルに表示されないばかりれます。助けてください！

Answer 1

$ scopeを使用すると非常に扱いにくいことがあります。私は角度でベストではないんだけど、あなたがここに関数やコントローラの$スコープの$スコープを使用している場合、私は考え

$scope.newProducts.push($scope.prod); 

を持っていません。

コントローラの一番上に「var vm = $ scope」と入力し、htmlでは「Controller as vm」と入力します。

もしあなたがそこにいるなら、問題がまだ存在するかどうかを見ることができます。

Answer 2

角コピーを使用します。 角$スコープは双方向にバインドされています。最初のテーブルで行われた変更は、双方向でバインドされている$ scope.prodをプッシュしているので、2番目のテーブルに反映されます。

Answer 3

角度変数は参照型です。だから、この問題を克服するためにangular.copy（）を使うことができます。コードの下に。

$scope.addNewProduct= function(id){ 
 
     var products = angular.copy($scope.prod); 
 
     $scope.newProducts.push(products); 
 
     console.log("product array-"+JSON.stringify($scope.newProducts)); 
 
}

それはあなたに感謝を助けることを願っています。