1. Zuhause
  2. Frage und Antwort
  3. Probleme mit Abrufen von Daten aus verschachtelter ng-repeat

Probleme mit Abrufen von Daten aus verschachtelter ng-repeat

2017-02-08 5 views
0

Ich bin wie im Code-Schnipsel, eine einfache HTML-Seite mitProbleme mit Abrufen von Daten aus verschachtelter ng-repeat

<!doctype html> 
 
<html> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
 
    <script type="text/javascript"> 
 
     var app = angular.module('myApp', []); 
 
     app.controller('MainController', ['$scope', function($scope){ 
 
     $scope.products = ['Product1', 'Product2', 'Product3']; 
 

 
     $scope.Menu = { 
 
      Minimum: 10, 
 
      Maximum: 20, 
 
      Discount: 2.00 
 
     }; 
 

 
     $scope.MenuList = []; 
 
     //$scope.MenuList.push($scope.Menu); 
 

 
     $scope.AddNode = function($index){ 
 
      var arr = { 
 
       arrIndex: ($scope.MenuList.length + 1), 
 
       arrValue: $scope.Menu 
 
      }; 
 
      $scope.MenuList.push(arr); 
 
     }; 
 

 
     $scope.RemoveNode = function(){ 
 
      $scope.MenuList.pop(); 
 
     }; 
 
\t \t 
 
\t \t $scope.SubmitQuery = function(){ 
 
\t \t \t $scope.ExpectedResult = $scope.MenuList; 
 
\t \t }; 
 

 
     }]); 
 
    </script> 
 
    </head> 
 
    <body ng-app="myApp"> 
 
    <div ng-controller="MainController"> 
 
     <table style="width: 60%;" border="0" cellpadding="5" cellspacing="5"> 
 
     <thead> 
 
      <tr> 
 
      <th rowspan="2">Sr. No</th> 
 
      <th rowspan="2">Product Name</th> 
 
      <th colspan="2">Quantities</th> 
 
      <th rowspan="2">Discount %</th> 
 
      <th rowspan="2">Manage</th> 
 
      <th rowspan="2">Submit</th> 
 
      </tr> 
 
      <tr> 
 
      <th>Min. Quantity</th> 
 
      <th>Max. Quantity</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr ng-repeat="product in products"> 
 
      <td>{{$index + 1}}</td> 
 
      <td>{{product}}</td> 
 
      <td colspan="3"> 
 
       <table style="width: 100%;"> 
 
       <tbody> 
 
        <tr ng-repeat="menu in MenuList"> 
 
        <td> 
 
         <input type="text"/> 
 
        </td> 
 
        <td> 
 
         <input type="text"/> 
 
        </td> 
 
        <td> 
 
         <input type="text"/> 
 
        </td> 
 
        </tr> 
 
       </tbody> 
 
       </table> 
 
      </td> 
 
      <td> 
 
       <button ng-click="AddNode($index)">+</button> 
 
       <button ng-click="RemoveNode($index)">-</button> 
 
      </td> 
 
      <td> 
 
       <button ng-click="SubmitQuery()">Submit</button> 
 
      </td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
\t <div> 
 
\t \t {{ExpectedResult}} 
 
\t </div> 
 
    </div> 
 
    </body> 
 
</html>

Die Ausgabe von bestimmtem Code ist 

[ 
    { 
     "arrIndex":1, 
     "arrValue":{"Minimum":10,"Maximum":20,"Discount":2}}, 
    { 
     "arrIndex":2, 
     "arrValue":{"Minimum":10,"Maximum":20,"Discount":2} 
    } 
]

Die erwartete Ausgabe ist 

[{ 
    "Product1": 
     [ 
      { 
       "arrIndex":1, 
       "arrValue":{"Minimum":10, "Maximum":20, "Discount":2} 
      }, 
      { 
       "arrIndex":2, 
       "arrValue":{"Minimum":21, "Maximum":30, "Discount":2} 
      } 
     ], 
    "Product2": 
     [ 
      { 
       "arrIndex":1, 
       "arrValue":{"Minimum":50, "Maximum":60, "Discount":5} 
      }, 
      { 
       "arrIndex":2, 
       "arrValue":{"Minimum":60, "Maximum":70, "Discount":5} 
      } 
     ] 
}]


Auch nach zwei Tagen der Analyse bin ich nicht in der Lage, die Winkelmodellbindung richtig zu bekommen, wenn ng-repeat verschachtelt ist. (Jede Ressource Referenz ist sehr zu begrüßen).

Ich muss nur die Ausgabe mit dem jeweiligen Produkt zuordnen.

Jungs bitte helfen, ich brauche es verzweifelt.

Vielen Dank. Haben Sie einen schönen Tag. :-)

Quelle

2017-02-08 Denver Gomes

Antwort

0

initialisieren Array

$scope.products = {'Product1':[], 'Product2':[], 'Product3':[]};

Dann Element drücken, um die Array-

$scope.AddNode = function(productName) { 
      var arr = { 
       arrIndex: ($scope.products[productName].length + 1), 
       arrValue: $scope.Menu 
      }; 
      $scope.products[productName].push(arr); 
      }; 


 var app = angular.module('myApp', []); 
 
     app.controller('MainController', ['$scope', 
 
     function($scope) { 
 
      $scope.products = {'Product1':[], 'Product2':[], 'Product3':[]}; 
 

 
      $scope.Menu = { 
 
      Minimum: 10, 
 
      Maximum: 20, 
 
      Discount: 2.00 
 
      }; 
 

 
      $scope.MenuList = []; 
 
      //$scope.MenuList.push($scope.Menu); 
 

 
      $scope.AddNode = function(productName) { 
 
      var arr = { 
 
       arrIndex: ($scope.products[productName].length + 1), 
 
       arrValue: $scope.Menu 
 
      }; 
 
      $scope.products[productName].push(arr); 
 
      }; 
 

 
      $scope.RemoveNode = function(productName) { 
 
      $scope.products[productName].pop(); 
 
      }; 
 

 
      $scope.SubmitQuery = function() { 
 
      console.log($scope.products); 
 
      $scope.ExpectedResult = $scope.MenuList; 
 
      }; 
 

 
     } 
 
     ]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="MainController"> 
 
    <table style="width: 60%;" border="0" cellpadding="5" cellspacing="5"> 
 
     <thead> 
 
     <tr> 
 
      <th rowspan="2">Sr. No</th> 
 
      <th rowspan="2">Product Name</th> 
 
      <th colspan="2">Quantities</th> 
 
      <th rowspan="2">Discount %</th> 
 
      <th rowspan="2">Manage</th> 
 
      <th rowspan="2">Submit</th> 
 
     </tr> 
 
     <tr> 
 
      <th>Min. Quantity</th> 
 
      <th>Max. Quantity</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr ng-repeat="(key,value) in products"> 
 
      <td>{{$index + 1}}</td> 
 
      <td>{{key}}</td> 
 
      <td colspan="3"> 
 
      <table style="width: 100%;"> 
 
       <tbody> 
 
       <tr ng-repeat="menu in value"> 
 
        <td> 
 
        <input type="text" /> 
 
        </td> 
 
        <td> 
 
        <input type="text" /> 
 
        </td> 
 
        <td> 
 
        <input type="text" /> 
 
        </td> 
 
       </tr> 
 
       </tbody> 
 
      </table> 
 
      </td> 
 
      <td> 
 
      <button ng-click="AddNode(key)">+</button> 
 
      <button ng-click="RemoveNode(key)">-</button> 
 
      </td> 
 
      <td> 
 
      <button ng-click="SubmitQuery()">Submit</button> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    <div> 
 
     {{ExpectedResult}} 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2017-02-08 04:47:06

0

etwas gefällt das

// Code goes here 
 

 
var app = angular.module('myApp', []); 
 
     app.controller('MainController', ['$scope', function($scope){ 
 
$scope.products =[{ 
 
    'Product1':[ 
 
      { 
 
       "arrIndex":1, 
 
       "arrValue":{"Minimum":10, "Maximum":20, "Discount":2} 
 
      } 
 
      ] 
 
},{ 
 
    'Product2':[{ 
 
       "arrIndex":1, 
 
       "arrValue":{"Minimum":10, "Maximum":20, "Discount":2} 
 
      }] 
 
},{ 
 
    'Product3':[{ 
 
       "arrIndex":1, 
 
       "arrValue":{"Minimum":10, "Maximum":20, "Discount":2} 
 
      }] 
 
}]; 
 

 
     $scope.Menu = { 
 
      Minimum: '', 
 
      Maximum: '', 
 
      Discount:'' 
 
     }; 
 

 
     $scope.AddNode = function($index,value){ 
 
      var arr = { 
 
       arrIndex: '', 
 
       arrValue: $scope.Menu 
 
      }; 
 
      
 
      var count=1; 
 
     for(var a in value){ 
 
     $scope.products[$index][a].push(arr); 
 
     for(var i=0;i<$scope.products[$index][a].length;i++){ 
 
      $scope.products[$index][a][i].arrIndex=count; 
 
      count++; 
 
     } 
 
     } 
 
     }; 
 

 
     $scope.RemoveNode = function($index,value){ 
 
      for(var a in value){ 
 
      $scope.products[$index][a].pop(); 
 
      } 
 
     }; 
 
\t \t 
 
\t \t $scope.SubmitQuery = function(){ 
 
\t \t \t $scope.ExpectedResult = $scope.products; 
 
\t \t }; 
 

 
     }]);
<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
 

 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body ng-app="myApp"> 
 
    <div ng-controller="MainController"> 
 
     <table style="width: 60%;" border="0" cellpadding="5" cellspacing="5"> 
 
     <thead> 
 
      <tr> 
 
      <th rowspan="2">Sr. No</th> 
 
      <th rowspan="2">Product Name</th> 
 
      <th colspan="2">Quantities</th> 
 
      <th rowspan="2">Discount %</th> 
 
      <th rowspan="2">Manage</th> 
 
      <th rowspan="2">Submit</th> 
 
      </tr> 
 
      <tr> 
 
      <th>Min. Quantity</th> 
 
      <th>Max. Quantity</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr ng-repeat="(key,value) in products track by $index"> 
 
      <td>{{$index + 1}}</td> 
 
      <td ng-repeat="(k,v) in value">{{k}}</td> 
 
      <td colspan="3"> 
 
       <table style="width: 100%;"> 
 
       <tbody ng-repeat="(k,v) in value track by $index"> 
 
        <tr ng-repeat="a in v"> 
 
        <td > 
 
         <input type="text" ng-model="v[$index].arrValue.Minimum"/> 
 
        </td> 
 
        <td> 
 
         <input type="text" ng-model="v[$index].arrValue.Maximum"/> 
 
        </td> 
 
        <td> 
 
         <input type="text" ng-model="v[$index].arrValue.Discount"/> 
 
        </td> 
 
        </tr> 
 
       </tbody> 
 
       </table> 
 
      </td> 
 
      <td> 
 
       <button ng-click="AddNode($index,value)">+</button> 
 
       <button ng-click="RemoveNode($index,value)">-</button> 
 
      </td> 
 
      <td> 
 
       <button ng-click="SubmitQuery()">Submit</button> 
 
      </td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
\t <div> 
 
    <pre>{{ExpectedResult | json}}</pre> 
 
\t </div> 
 
    </div> 
 
    </body> 
 

 
</html>

working code

Quelle

2017-02-08 06:59:37

Verwandte Themen

 Verwandte Themen