Question

我有各种各样的菜肴。所有菜肴都属于他们所属的类别，并且几种菜肴可以属于同一类别。如何使用菜肴阵列生成这些类别的列表（dishCategory，并将其拉到我的控制器，消除任何dooblons？（我现在已经硬编码，但效率非常低）。这是一个plunker来说明我的案例

DISHLIST.js：

angular.module('wmapp.factory_dishes', [])

wmapp.factory('dishesFactory', function () {
    "use strict";
    var factory = {
            dishes : [
                {nameEnglish: 'TAPENADE', nameLocal: 'Tapenade', description: 'xxxxxx',  region: 'Provence-Alpes-Côte d\'Azur', regioncode: 'FR.B8', itemid: 'FR002', cuisineTypeIsoCode: 'FR',  dishCategory: 'Bakery', country: 'France', type: 'top_10'},
                {nameEnglish: 'GREEK STYLE MUSHROOMS  ', nameLocal: 'xxxxx',  region: 'All', regioncode: '', itemid: 'FR003', cuisineTypeIsoCode: 'FR',  dishCategory: 'Pie / pizza', country: 'France', type: ''},
                {nameEnglish: 'HAM & CHEESE TOASTED SANDWICHS / WITH EGGS', nameLocal: 'Croque Monsieur / Croque Madame', description: 'xxxxxxx',  region: 'All', regioncode: '', itemid: 'FR005', cuisineTypeIsoCode: 'FR',  dishCategory: 'Sandwich', country: 'France'},
                {nameEnglish: 'ONION SOUP', nameLocal: 'Soupe à l’oignon', description: 'xxxxx',  region: 'All', regioncode: '', itemid: 'FR008', cuisineTypeIsoCode: 'FR',  dishCategory: 'Pie / pizza', country: 'France', type: 'top_10'}
                {nameEnglish: 'VEAL ESCALOPE WITH CREAMY MUSHROOM DRESSING', nameLocal: 'xxxxx',  region: 'Lower Normandy', regioncode: 'FR.99', itemid: 'FR047', cuisineTypeIsoCode: 'FR',  dishCategory: 'Side dish', country: 'France'},
                {nameEnglish: 'ROASTED PORK WITH PRUNES', nameLocal: 'Roti de porc aux pruneaux', description: ' ',  region: 'Poitou-Charentes', regioncode: 'FR.B7', itemid: 'FR048', cuisineTypeIsoCode: 'FR',  dishCategory: 'Side dish', country: 'France'},
                {nameEnglish: 'STUFFED TOMATOES', nameLocal: 'Tomates farcies', description: 'xxxx',  region: 'All ', regioncode: '', itemid: 'FR049', cuisineTypeIsoCode: 'FR',  dishCategory: 'Meat', country: 'France'},
                {nameEnglish: 'VEAL PAUPIETTES', nameLocal: '  ',  region: 'Lower Normandy', regioncode: 'FR.99', itemid: 'FR050', cuisineTypeIsoCode: 'FR',  dishCategory: 'Meat', country: 'France'},
                {nameEnglish: 'ROAST LEG OF LAMB', nameLocal: 'Gigot d’agneau', description: 'xxxxxx.',  region: 'Lower Normandy', regioncode: 'FR.99', itemid: 'FR051', cuisineTypeIsoCode: 'FR',  dishCategory: 'Main', country: 'France', type: 'top_10'},
                {nameEnglish: 'BAKED WITLOF AND HAM', nameLocal: 'Gratin d’endives au jambon', description: 'xxxxxx ',  region: 'Nord-Pas-de-Calais', regioncode: 'FR.B4', itemid: 'FR052', cuisineTypeIsoCode: 'FR',  dishCategory: 'Meat', country: 'France'},
                {nameEnglish: 'SMOKED PORK WITH GREEN LENTILS', nameLocal: 'Petit sale aux lentilles', description: 'xxxx',  region: 'Auvergne', regioncode: 'FR.98', itemid: 'FR053', cuisineTypeIsoCode: 'FR',  dishCategory: 'Main', country: 'France'},
                {nameEnglish: 'BLUE RIBBON', nameLocal: 'Cordon bleu', description: 'xxxxxx',  region: 'All ', regioncode: '', itemid: 'FR054', cuisineTypeIsoCode: 'FR',  dishCategory: 'Main', country: 'France'},

            ],
            getDishes : function () {
                return factory.dishes;
            },
            getDish : function (itemid) {
                var dish = {};
                angular.forEach(factory.dishes, function (value, key) {
                    if (value.itemid === itemid) {
                        dish = value;
                    }
                });

                return dish;
            }
        };
    return factory;
});

DISH CATEGORORIES控制器：

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

// dishlistcontroller 
 wmapp.controller('dishTypeListController', function ($scope, $rootScope) {
    "use strict";
    $scope.dishTypeList = [
        {'name': 'Bakery'},
        {'name': 'Beverage'},
        {'name': 'Meat'},
        {'name': 'Pastry'},
        {'name': 'Pie / pizza'},
        {'name': 'Salads'},
        {'name': 'Sandwich'}
    ];
    $scope.selection = [];


})

Answer 1

我通常只是将它留给lib，如下划线或lodash来做这类事情，但你绝对可以使用像user3906922建议的普通香草js这样做。

见下文（打开控制台查看结果......）：

var dishes = [
                {nameEnglish: 'TAPENADE', nameLocal: 'Tapenade', description: 'xxxxxx',  region: 'Provence-Alpes-Côte d\'Azur', regioncode: 'FR.B8', itemid: 'FR002', cuisineTypeIsoCode: 'FR',  dishCategory: 'Bakery', country: 'France', type: 'top_10'},
                {nameEnglish: 'GREEK STYLE MUSHROOMS  ', nameLocal: 'xxxxx',  region: 'All', regioncode: '', itemid: 'FR003', cuisineTypeIsoCode: 'FR',  dishCategory: 'Pie / pizza', country: 'France', type: ''},
                {nameEnglish: 'HAM & CHEESE TOASTED SANDWICHS / WITH EGGS', nameLocal: 'Croque Monsieur / Croque Madame', description: 'xxxxxxx',  region: 'All', regioncode: '', itemid: 'FR005', cuisineTypeIsoCode: 'FR',  dishCategory: 'Sandwich', country: 'France'},
                {nameEnglish: 'ONION SOUP', nameLocal: 'Soupe à l’oignon', description: 'xxxxx',  region: 'All', regioncode: '', itemid: 'FR008', cuisineTypeIsoCode: 'FR',  dishCategory: 'Pie / pizza', country: 'France', type: 'top_10'},
                {nameEnglish: 'VEAL ESCALOPE WITH CREAMY MUSHROOM DRESSING', nameLocal: 'xxxxx',  region: 'Lower Normandy', regioncode: 'FR.99', itemid: 'FR047', cuisineTypeIsoCode: 'FR',  dishCategory: 'Side dish', country: 'France'},
                {nameEnglish: 'ROASTED PORK WITH PRUNES', nameLocal: 'Roti de porc aux pruneaux', description: ' ',  region: 'Poitou-Charentes', regioncode: 'FR.B7', itemid: 'FR048', cuisineTypeIsoCode: 'FR',  dishCategory: 'Side dish', country: 'France'},
                {nameEnglish: 'STUFFED TOMATOES', nameLocal: 'Tomates farcies', description: 'xxxx',  region: 'All ', regioncode: '', itemid: 'FR049', cuisineTypeIsoCode: 'FR',  dishCategory: 'Meat', country: 'France'},
                {nameEnglish: 'VEAL PAUPIETTES', nameLocal: '  ',  region: 'Lower Normandy', regioncode: 'FR.99', itemid: 'FR050', cuisineTypeIsoCode: 'FR',  dishCategory: 'Meat', country: 'France'},
                {nameEnglish: 'ROAST LEG OF LAMB', nameLocal: 'Gigot d’agneau', description: 'xxxxxx.',  region: 'Lower Normandy', regioncode: 'FR.99', itemid: 'FR051', cuisineTypeIsoCode: 'FR',  dishCategory: 'Main', country: 'France', type: 'top_10'},
                {nameEnglish: 'BAKED WITLOF AND HAM', nameLocal: 'Gratin d’endives au jambon', description: 'xxxxxx ',  region: 'Nord-Pas-de-Calais', regioncode: 'FR.B4', itemid: 'FR052', cuisineTypeIsoCode: 'FR',  dishCategory: 'Meat', country: 'France'},
                {nameEnglish: 'SMOKED PORK WITH GREEN LENTILS', nameLocal: 'Petit sale aux lentilles', description: 'xxxx',  region: 'Auvergne', regioncode: 'FR.98', itemid: 'FR053', cuisineTypeIsoCode: 'FR',  dishCategory: 'Main', country: 'France'},
                {nameEnglish: 'BLUE RIBBON', nameLocal: 'Cordon bleu', description: 'xxxxxx',  region: 'All ', regioncode: '', itemid: 'FR054', cuisineTypeIsoCode: 'FR',  dishCategory: 'Main', country: 'France'},

            ];
  
  var categories = _.chain(dishes)  //Easier chaining in underscore so I don't have to pass the array to subsequent calls..
    .map(function(d) { return { name : d.dishCategory }; })  //pull out the dishCategory and return it in the desired format
    .uniq(function(c) { return c.name; })  //ensure that the new category list is unique
    .sort(function(c) { return c.name; })  //extra credit... sort it
    .value();  //finally, get it out of underscore into a proper category array... [ { name: 'blah' }, {name : 'blah1'} ]
  
  console.log(categories);

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

Answer 2

您可以在工厂添加一个功能，以获得不同的菜肴类别：

getCategories: function() {
    var categories = [], o = {};
    angular.forEach(factory.dishes, function (value, key) {
        if (o.hasOwnProperty(value.dishCategory)) {
            return;
        }
        categories.push(value.dishCategory);
        o[value.dishCategory] = true;
    });
    return categories;
}

然后将该工厂注入您的控制器，并调用该功能：

wmapp.controller('dishTypeListController', function ($scope, $rootScope, dishesFactory) {
    "use strict";

    $scope.selection = [];
    $scope.categories = dishesFactory.getCategories();

})

选中plunker。

从数组中提取值列表，消除dooblons

2 个答案: