Question

我在代码段中有一个简单的HTML页面，

<!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();
        };
		
		$scope.SubmitQuery = function(){
			$scope.ExpectedResult = $scope.MenuList;
		};

      }]);
    </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>
	  <div>
		{{ExpectedResult}}
	  </div>
    </div>
  </body>
</html>

给定代码的输出为

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

预期输出为

[{
   "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}
            }
        ]
}]

即使经过两天的分析，当ng-repeat嵌套时，我也无法获得正确的角度模型绑定。（最欢迎任何资源参考）。

我只需要将输出映射到相应的产品。

伙计们请帮忙，我绝望地需要它。

谢谢。祝你有愉快的一天。： - ）

Answer 1

初始化数组

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

然后将元素推送到数组

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

Answer 2

做这样的事情

// 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();
          }
        };
		
		$scope.SubmitQuery = function(){
			$scope.ExpectedResult = $scope.products;
		};

      }]);

<!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>
	  <div>
    <pre>{{ExpectedResult | json}}</pre>
	  </div>
    </div>
  </body>

</html>

working code

从嵌套的ng-repeat中获取数据的问题

2 个答案: