AngularJS将ng-repeat模型中的数据存储在对象中
[英]AngularJS storing data from ng-repeat models in object
问题描述
I'm trying to get an object like this: 
我正在尝试获得这样的对象：
$scope.order = {
'client' : '24',
'products' : [
{'id': '23', 'format' : 'box', 'units': '3'},
{'id': '33', 'format' : 'can', 'units': '24'},
{'id': '11', 'format' : 'box', 'units': '4'}
]
}
having the next controller 下一个控制器
(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);
};
});
})();
and view 并查看
<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>
I'm trying to update de object every time the checkbox is changed, adding the product id if checked and units of the input number but the structure I'm getting is wrong 我试图每次更改复选框时都更新对象，如果选中则添加产品ID和输入数字的单位，但是我得到的结构是错误的
$scope.order = {
"client":"12",
"products":{
"id":{"0":1,"1":2,"3":4},
"units":{"1":2,"3":1}
}
}
any clues?? 有任何线索吗？
EDIT: 编辑：
2 个解决方案
解决方案1
1 已采纳 2015-02-19 21:02:00
In your view: 您认为：
<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>
You are creating an array called id by using the model order.products.id[$index] and an array called units by using the model order.products.units[$index] . 您正在创建使用模型叫做id的数组order.products.id[$index] ，并利用该模型被称为单元阵列order.products.units[$index] 。 You are actually trying to access a product in the order.products[] array. 您实际上是在尝试访问order.products[]数组中的产品。 Rather than jump through the hoop of creating a new object, I would mark the item as selected and track its units. 与其跳过创建新对象的过程，不如将项目标记为选中并跟踪其单位。 You can then filter to just the selected products and do any desired transformation when the order is completed. 然后，您可以仅过滤选定的产品，并在完成订单后进行任何所需的转换。
Controller: 控制器：
(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);
};
});
})();
View: 视图：
<!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 柱塞： http ://plnkr.co/edit/1DYsSYF6Fscxto6vykJU?p=preview
解决方案2
0 2015-02-19 21:14:35
Modified the ng-model and ng-show to reflect array instead of object and similarly modified the js code 修改了ng-model和ng-show以反映数组而不是对象，并类似地修改了js代码
Plunker: http://plnkr.co/edit/TNBZgKNDTDhiLt3yOJkB?p=preview 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 = [];
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.