Angular JS 将空对象推送到数组

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();
};
});

请参阅下面的插件： 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 中的每个项目循环，您不断向其中添加选项......？无限循环。

非崩溃版本：http://plnkr.co/edit/5Sc2sWfhKBs9kLCk83f1?p=preview

你真正应该做的是检查你的数据结构。使 ProductOptions 成为 OptionTypes 的子对象，并将其重命名为 Options。在您的 GUI 中删除所有关于创建 id 的代码，这些代码应该由后端处理。相反，在 GUI 中应该有一个 Sortorder 属性选项（当然也被后端存储）。然后当你存储时，没有 id 的会被插入，有 id 的会被更新。这样处理一切就容易多了。

我还会将 optionTypes 和选项分解为它们自己的 services/providers。更容易跟踪需要做什么。每个基本上都包含添加、删除和可能的 find/getJSON 或其他内容。

这是重组后的版本。更容易跟踪什么属于哪里。而且它比原来的功能更多，代码更少。 http://plnkr.co/edit/BHcu6vAfcpEYQpZKHc5G?p=preview

Angular JS 将空对象推送到数组

Angular JS Push Empty Object To Array

javascript

push

angularjs