[英]Split and map array from comma separated string list in angularjs
我想合并两个逗号分隔的列表, CENTURY, BADGER
& CENTURY, BADGER
65, 85
形成如下数组: [{name: 'CENTURY', price: '65'}, {name: 'BADGER', price: 85}]
,列表在json对象中:
{
unit: '35 lb',
brands: 'CENTURY, BADGER'
prices: '65, 85'
}
所以我做的是一个过滤器:
angular
.module( 'app.purchases.products' )
.filter( 'mergeDetails', mergeDetails );
function mergeDetails() {
return function ( product ) {
_.merge( product.brands, product.prices );//Using lodash, any suggestion?
console.log('brands ', product.brands);
return product.brands;//`_.merge` will add prices to brands
}
}
我想知道如何将滤镜应用于插值{{ }}
以便我可以获得数组并在ng-repeat
使用它,这里是使用它的地方:
<tr ng-repeat="product in products">
<td>{{product.unit}}</td>
<td>
<!-- Here I should filter to ng-repeat the resulting array -->
{{product.brands +' '+ product.prices}}
</td>
</tr>
我想如果你寻找像这个CENTURY, BADGER, EXO
这样的输出CENTURY, BADGER, EXO
你只需要这样做
<li ng-repeat="p in products">
<p>{{p.brands}}</p>
</li>
我编辑这个添加过滤器可以帮助添加此过滤器
.filter('customSplit', function() {
return function(input) {
console.log(input);
var ar = input.split(','); // this will make string an array
return ar;
};
});
并且您的HTML视图已修改为
<li ng-repeat="p in products">
<p ng-repeat="brand in (p.brands | customSplit)">{{ brand }}{{$last ? '' : ', '}}</p>
</li>
转换数组时, Array.map很有用。
如果你有一个你的起始“产品”,你可以把它变成这样的数组:
var expandedProduct = product.brands.split(',').map(function(brand, index) {
return {
'name': product.name,
'brand': brand.trim(),
'cost': product.costs.split(',')[index].trim(),
'vat_cost': product.vat_costs.split(',')[index].trim()
}
});
您可以构建它来转换它们的数组。
这应该这样做:
var transpose = function(obj){
var result =[];
for(key in obj){
var aux = obj[key].split(",");
for(i in aux){
if(result[i]==null){
result[i]={};
}
result[i][key]=aux[i].trim()
}
}
return result
}
就个人而言,我不喜欢过滤器作为此问题的解决方案,因为正如术语定义的那样,它应该用于过滤/选择要显示的项目。 正如Steve Campbell建议的那样,您应该将产品转换/映射到您想要的形式。 演示
// flatten the pr0ducts into one array ...
vm._products = data.reduce(function (previous, current) {
return previous.concat(generateMergeList(current))
}, []);
// helper function to generate a list of product in a product data object
function generateMergeList(source) {
var result = [];
if (!source || !source.brands || !source.prices) {
return result;
}
var _brands = source.brands.split(',');
var _prices = source.prices.split(',');
if (_brands.length !== _prices.length) {
throw 'Number of items in brands and prices aren\'t the same...';
}
return _brands.map(function (elm, idx) {
return {
brand : elm,
price : _prices[idx],
unit : source.unit
};
});
}
let arrayDefaultDeliveryDay = Array.from(this.defaultDeliveryDays.split(","));
let arrayDefaultDeliveryFoodType = Array.from(this.defaultDeliveryFoodType.split(","));
let arrayDefaultDeliveryStartTime = Array.from(this.defaultDeliveryStartTime.split(","));
let arrayDefaultDeliveryEndTime = Array.from(this.defaultDeliveryEndTime.split(","));
var deliveryDetails = [];
for(var i = 0; i<=arrayDefaultDeliveryDay.length-1; i++){
deliveryDetails.push({
foodType : arrayDefaultDeliveryFoodType[i],
day : arrayDefaultDeliveryDay[i],
startTime : arrayDefaultDeliveryStartTime[i],
endTime : arrayDefaultDeliveryEndTime[i]
})
}
console.log(JSON.stringify(deliveryDetails));
经过大量的研究,终于找到了解决方案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.