Question

我一直在开发一个允许用户管理选项类型和选项的项目。基本上用户可以添加一个新的选项类型，假设他们将其命名为Color，然后他们添加选项 - 黑色，红色，紫色等。当集合首次加载现有记录时，应在末尾添加一个空选项< / p>

当用户开始在文本字段中输入内容时，我想添加一个新的空选项，从而始终为用户提供一个新的字段来使用。

我有这个几乎工作，但无法想出如何正确地将新的空选项添加到新的选项类型或现有的选项类型。 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中的每个项目循环，您可以继续添加选项....无限循环。

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

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

我还会将optionTypes和选项分解为自己的服务/提供商。更容易跟踪需要完成的工作。每个只是基本上包含添加，删除，也许是一个find / getJSON或其他东西。

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

Angular JS将空对象推送到数组

1 个答案: