Question

我正试图得到一个像这样的对象：

$scope.order = {
        'client' : '24',
        'products' : [
            {'id': '23', 'format' : 'box', 'units': '3'},
            {'id': '33', 'format' : 'can', 'units': '24'},
            {'id': '11', 'format' : 'box', 'units': '4'}
        ]
    }

拥有下一个控制器

 (function(){  
        var app = angular.module('myApp',[]);

        app.controller('Controller', function($scope){
            //data from service
            var items = [
              {'id':1, 'name': 'redItem'},
              {'id':2, 'name': 'blueItem'},
              {'id':3, 'name': 'yellowItem'},
              {'id':4, 'name': 'greenItem'},
            ];

            $scope.products = items;

            $scope.order = {
                    'client' : '12',
            };
            $scope.order.products = {};

            $scope.show = function(productID){
                console.log($scope.order.products);
                console.log($scope.order);  
            };
        });
    })();

并查看

<ul class="list">
<li ng-repeat="product in products | orderBy: 'name'">
    <p>
        <a ng-bind='product.name'></a>
        <input type="checkbox" ng-change="show()" ng-model="order.products.id[$index]" value="1" ng-true-value="{{product.id}}" ng-false-value="0">
        <input type="number" ng-model="order.products.units[$index]" min="1" ng-show="order.products.id[$index]"/>          
    </p>
</li>

我正在尝试每次更改复选框时更新de object，如果选中则添加产品ID，输入数字的单位但我得到的结构是错误的

$scope.order = {
    "client":"12",
    "products":{
      "id":{"0":1,"1":2,"3":4},
      "units":{"1":2,"3":1}
    }
}

任何线索??

修改

我忘记了那个傻瓜... plunker

Answer 1

在您看来：

<ul class="list">
<li ng-repeat="product in products | orderBy: 'name'">
    <p>
        <a ng-bind='product.name'></a>
        <input type="checkbox" ng-change="show()" ng-model="order.products.id[$index]" value="1" ng-true-value="{{product.id}}" ng-false-value="0">
        <input type="number" ng-model="order.products.units[$index]" min="1" ng-show="order.products.id[$index]"/>          
    </p>
</li>

您正在使用模型order.products.id[$index]创建一个名为id的数组，并使用模型order.products.units[$index]创建一个名为units的数组。您实际上是在尝试访问order.products[]数组中的产品。我不是跳过创建新对象的箍，而是将项目标记为已选中并跟踪其单位。然后，您可以过滤到所选产品，并在订单完成时进行任何所需的转换。

控制器：

(function(){

  var app = angular.module('myApp',[]);

  app.controller('Controller', function($scope, $filter){
    //data from service
    var items = [
      {'id':1, 'name': 'redItem'},
      {'id':2, 'name': 'blueItem'},
      {'id':3, 'name': 'yellowItem'},
      {'id':4, 'name': 'greenItem'},
    ];

    $scope.products = items;

    $scope.order = {
            'client' : '12',
    };

    $scope.show = function(productID){
        console.log($scope.order.products);
        console.log($scope.order);

        $scope.order.products = $filter('filter')($scope.products, { isSelected: true }, true);
    };
  });

})();

查看：

<!DOCTYPE html>
<html ng-app='myApp'>

  <head>
    <script data-require="angular.js@*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="Controller">
      <ul class="list">
          <li ng-repeat="product in products">
              <p>
                <a ng-bind='product.name'></a>
                  <input type="checkbox" ng-change="show(product.id)" ng-model="product.isSelected" />
                  <input type="number" ng-model="product.units" min="1" ng-show="product.isSelected" />
              </p>
          </li>
      </ul>
      <p>{{order}}</p>
    </div>
  </body>

</html>

Plunker：http://plnkr.co/edit/1DYsSYF6Fscxto6vykJU?p=preview

Answer 2

修改ng-model和ng-show以反映数组而不是对象，并类似地修改了js代码

Plunker：http://plnkr.co/edit/TNBZgKNDTDhiLt3yOJkB?p=preview

<input  type="checkbox" ng-change="show(product.id)" ng-model="order.products[$index].id" value="1" ng-true-value="{{product.id}}" ng-false-value="0">
<input type="number" ng-model="order.products[$index].units" min="1" ng-show="order.products[$index].id"/>

$scope.order.products = [];

AngularJS存储来自ng-repeat模型的数据

2 个答案: