在角，你怎么遍历两个数组来填充第三？ [英] In Angular, how do you loop through two arrays to populate a third?

问题描述

我使用的forEach通过两个数组（蛋糕，糖霜）循环。警报印证了预期的效果。
如何可以将结果被添加到第3数组？ （cakeOptions）
这拨弄显示到目前为止的工​​作：
http://jsfiddle.net/_StephenC/ov5syuwb/20/

感谢

 函数CakeController（$范围）{
$ scope.cakes = [{
    名称：'巧克力'，
    价格：6
}，{
    名称：'黄'，
    价格：5
}，{
    名称：'椰子'，
    价格：7
}
];
$ scope.frostings = [{
    '名'：'巧克力'，
        价格：5
}，{
    '名'：'香草'，
        价格：5
}，{
    '名'：'椰子'，
        价格：8
}];$ scope.cakeOptions = [];angular.forEach（$ scope.cakes，功能（值，键）{
VAR thisCake = JSON.stringify（value.name）;
angular.forEach（$ scope.frostings，功能（价值）{
VAR thisFrosting = JSON.stringify（value.name，value.value）;
警报（thisCake + + + thisFrosting'结霜'蛋糕'）;
 

解决方案

我创建的实际工作，并与组合的数组填充第三个框的例子添加一个新的小提琴：

的jsfiddle

HTML

 ＆LT; D​​IV NG-应用=cakeApp＆GT;
    ＆LT; D​​IV NG控制器=cakeCtrl＆GT;
        ＆LT; D​​IV ID =一＆GT;＆LT;强＆GT;蛋糕和LT; / STRONG＆GT;＆LT; BR＆GT;
            ＆LT; D​​IV CLASS =订单NG重复=蛋糕蛋糕＆GT;
                {{cake.name}}
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV ID =两化＆GT;＆LT;强＆GT;＆糖霜LT; / STRONG＆GT;＆LT; BR＆GT;
            ＆LT; D​​IV CLASS =订单NG重复=结霜糖霜＆GT;
                {{frosting.name}}
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
            ＆LT; D​​IV ID =三＆GT;＆LT;强＆GT;＆组合LT; / STRONG＆GT;＆LT; BR＆GT;
            ＆LT; D​​IV CLASS =订单NG重复=cakeOption在cakeOptions＆GT;
                {{cakeOption}}
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

JavaScript的：

  VAR应用= angular.module（'cakeApp'，[]）;
app.controller（'cakeCtrl'，['$范围'，函数（$范围）{
    $ scope.cakes = [{
        名称：'巧克力'，
        价格：6
    }，{
        名称：'黄'，
        价格：5
    }，{
        名称：'椰子'，
        价格：7
    }];    $ scope.frostings = [{
        '名'：'巧克力'，
            价格：5
    }，    {
        '名'：'香草'，
            价格：5
    }，{
        '名'：'椰子'，
            价格：8
    }];
    $ scope.cakeOptions = [];    angular.forEach（$ scope.cakes，功能（值，键）{
        VAR thisCake = JSON.stringify（value.name）;
        angular.forEach（$ scope.frostings，功能（价值）{
            VAR thisFrosting = JSON.stringify（value.name，value.value）;
            $ scope.cakeOptions.push（thisCake +'蛋糕'+ thisFrosting +'霜'）;
        }）;
    }）;
}]）;
 

I am using forEach to loop through two arrays (cake and frosting). An alert confirms the expected results. How can the results be added to the 3rd array? (cakeOptions) This fiddle shows the work so far: http://jsfiddle.net/_StephenC/ov5syuwb/20/

Thanks

function CakeController($scope) {
$scope.cakes = [{
    name: 'chocolate',
    'price': 6
}, {
    name: 'yellow',
    'price': 5
}, {
    name: 'coconut',
    'price': 7
}
];
$scope.frostings = [{
    'name': 'chocolate',
        'price': 5
},

{
    'name': 'vanilla',
        'price': 5
}, {
    'name': 'coconut',
        'price': 8
}];

$scope.cakeOptions = [];

angular.forEach($scope.cakes, function (value, key) {
var thisCake = JSON.stringify(value.name);
angular.forEach($scope.frostings, function (value) {
var thisFrosting = JSON.stringify(value.name, value.value);
alert(thisCake + ' cake with ' + thisFrosting + ' frosting');

解决方案

I have created a new fiddle that actually works and with the added example of populating a third box from an array of the combinations:

JSFiddle

HTML

<div ng-app="cakeApp">
    <div ng-controller="cakeCtrl">
        <div id="one"><strong>Cakes</strong><br>
            <div class="order" ng-repeat="cake in cakes">
                {{cake.name}}
            </div>
        </div>
        <div id="two"><strong>Frostings</strong><br>
            <div class="order" ng-repeat="frosting in frostings">
                {{frosting.name}}
            </div>
        </div>
            <div id="three"><strong>Combinations</strong><br>
            <div class="order" ng-repeat="cakeOption in cakeOptions">
                {{cakeOption}}
            </div>
        </div>
    </div>
</div>

JAVASCRIPT:

var app = angular.module('cakeApp', []);
app.controller('cakeCtrl', ['$scope', function($scope) {
    $scope.cakes = [{
        name: 'chocolate',
        price: 6
    }, {
        name: 'yellow',
        price: 5
    }, {
        name: 'coconut',
        price: 7
    }];

    $scope.frostings = [{
        'name': 'chocolate',
            'price': 5
    },

    {
        'name': 'vanilla',
            'price': 5
    }, {
        'name': 'coconut',
            'price': 8
    }];
    $scope.cakeOptions = [];

    angular.forEach($scope.cakes, function (value, key) {
        var thisCake = JSON.stringify(value.name);
        angular.forEach($scope.frostings, function (value) {
            var thisFrosting = JSON.stringify(value.name, value.value);
            $scope.cakeOptions.push(thisCake + ' cake with ' + thisFrosting + ' frosting');
        });
    });
}]);

这篇关于在角，你怎么遍历两个数组来填充第三？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！