Угловой JS Push Empty Object To Array

Question

Я работаю над проектом, который позволяет пользователю управлять опциями и опциями. В принципе пользователь может добавить новый тип параметра, допустим, он назовет его «Цвет», а затем добавит опции «Черный», «Красный», «Фиолетовый» и т. Д. Когда коллекция сначала загружает существующие записи, в конце следует добавить пустую опцию

Когда пользователь начинает вводить текстовое поле, я хочу добавить новую пустую опцию, тем самым всегда предоставляя пользователю новое поле для работы.

У меня это почти работает, но не могу понять, как правильно добавить новую пустую опцию в новый тип параметра или существующие типы опций. Метод push продолжает сбой Plunkr. Любой вклад оценили, краткий обзор образец plunkr ниже

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

app.controller('MainCtrl', function($scope) { 

$scope.optionTypeId = 0; 
$scope.productOptionId = 0; 

$scope.productEditorModel = { 
    "ProductOptions": [0], 
    "OptionTypes": [0] 
}; 

$scope.productEditorModel.optionTypeName = ''; 

$scope.addEmptyOption = function (optionTypeId) { 

var emptyOption = { ProductOptionId: 3, ProductId: '1066', OptionTypeId: 1, OptionValue: '', Price: '', IsStocked: true }; 
console.log(emptyOption); 
//$scope.productEditorModel.ProductOptions.push(emptyOption); 
}; 

$scope.loadData = function() { 

$scope.productEditorModel.OptionTypes = [{ OptionTypeId: 1, OptionName: 'Color' },{ OptionTypeId: 2, OptionName: 'Size' },]; 
    $scope.productEditorModel.ProductOptions = [{ ProductOptionId: 1, ProductId: '1066', OptionTypeId: 2, OptionValue: 'Medium', Price: '', IsStocked: true, },{ ProductOptionId: 2, ProductId: '1066', OptionTypeId: 1, OptionValue: 'Black', Price: '', IsStocked: true }]; 

angular.forEach($scope.productEditorModel.ProductOptions, function (item) { 
     //console.log(item.OptionTypeId); 
     $scope.addEmptyOption(item.OptionTypeId); 
}); 
}; 

$scope.loadData(); 

$scope.removeOption = function (option) { 
     var index = $scope.productEditorModel.ProductOptions.indexOf(option); 
     $scope.productEditorModel.ProductOptions.splice(index, 1); 
}; 

$scope.filterEmptyElements = function (optionTypeId) { 
$scope.emptyElements = $.grep($scope.productEditorModel.ProductOptions, function (k) { return k.OptionValue === "" || angular.isUndefined(k.OptionValue) && k.OptionTypeId == optionTypeId }); 
}; 

$scope.update = function (option, index) { 
    var optionTypeId = option.OptionTypeId; 
    $scope.filterEmptyElements(optionTypeId); 

    if (!angular.isUndefined(option.OptionValue) && $scope.emptyElements.length == 1 && option.OptionValue.length > 0) { 
     $scope.addOption(optionTypeId); 
    } else if (angular.isUndefined(option.OptionValue)) { 
     $scope.removeOption(option); 
    } 
}; 

$scope.addOptionType = function() { 
    var optionTypeId = --$scope.optionTypeId; 
    var optionName = $scope.productEditorModel.optionTypeName; 
    var newOptionType = { OptionTypeId: optionTypeId, OptionName: optionName }; 

    $scope.productEditorModel.OptionTypes.push(newOptionType); 
    $scope.addEmptyOption(optionTypeId); 
}; 

$scope.editOptionType = function (optionType) { 
    $scope.editing = true; 
}; 

$scope.saveOptionType = function (optionType) { 
    $scope.editing = false; 
}; 

$scope.trackOptionTypesCount = function() { 
if ($scope.productEditorModel.OptionTypes.length == 3) { 
    $scope.isMaxOptionTypes = true; 
} else { 
    $scope.isMaxOptionTypes = false; 
} 
}; 

$scope.removeOptionType = function (optionType) { 
    var index = $scope.productEditorModel.OptionTypes.indexOf(optionType); 
    $scope.productEditorModel.OptionTypes.splice(index, 1); 
    $scope.trackOptionTypesCount(); 
}; 
}); 

Смотрите ниже plunker: http://plnkr.co/edit/YHLtSwQWVb2swhNVTQzU?p=info

Answer 1

Ошибка вы получите, что $ is not defined потому, что вы не включили JQuery. Для этого вам не нужен jQuery, но array.map должен иметь возможность выполнять те же функции.

$scope.emptyElements = $scope.productEditorModel.ProductOptions.map(function (k) { 
    return k.OptionValue === "" || angular.isUndefined(k.OptionValue) && k.OptionTypeId == optionTypeId 
}); 

И он выходит из строя, потому что внутри $scope.loadData у вас есть

angular.forEach($scope.productEditorModel.ProductOptions, function (item) { 
    $scope.addEmptyOption(item.OptionTypeId); 
}); 

, а затем внутри $scope.addEmptyOption вы пытаетесь

$scope.productEditorModel.ProductOptions.push(emptyOption); 

Так foreach будет петля для каждого элемента в $scope.productEditorModel.ProductOptions, который вы держите добавив опции так ....? Бесконечная петля.

Non-врезаться версия: http://plnkr.co/edit/5Sc2sWfhKBs9kLCk83f1?p=preview

Что вам действительно нужно делать, хотя это смотреть через структуру данных. Сделайте ProductOptions под-объектом OptionTypes и просто переименуйте его в Options. Удалите ВСЕ код о создании идентификатора здесь в вашем графическом интерфейсе, который должен обрабатываться бэкэнд. Вместо этого в графическом интерфейсе в настройках должно быть свойство Sortorder (которое также, конечно, хранится в бэкэнд). Затем, когда вы храните, те, у которых нет идентификатора, встают, те, у которых есть идентификатор, обновляются. Намного легче справиться с этим.

Я также выломал опции и варианты для своих собственных услуг/поставщиков. Намного легче отслеживать, что нужно сделать. И каждый в основном содержит добавление, удаление и, возможно, find/getJSON или что-то в этом роде.

Это реструктурированная версия. Намного легче отслеживать, что принадлежит. И он имеет больше возможностей, чем оригинал с меньшим количеством кода. http://plnkr.co/edit/BHcu6vAfcpEYQpZKHc5G?p=preview