Question

我有一个相当普通的角度形式，带有标题，正文字段，还有一个带有选项列表的下拉选择。选项是硬编码的，但后端只接受一个对象数组，而正文接受带有对象的键。

我的输入目前看起来如此：

<label for="platform">Platform</label>
<select id="platform" name="platform" class="form-control" ng-model="lfg.field_platform">
    <option value="1183">Option 1</option>
    <option value="1184">Option 2</option>
    <option value="1182">Option 3</option>
    <option value="1188">Option 4</option>
    <option value="1186">Option 5</option>
    <option value="1185">Option 6</option>
</select>

正如预期的那样，它会返回：

{
  "title": "test",
  "body": "here is the body",
  "field_platform": "1184"
}

但是我需要field_platform返回：

{
  "type": "dataset",
  "title": "Just a title",
  "body": {
    "value": "Detailed text goes here"
  },
  "field_platform": [
    {
      "id": 1184
    }
  ]
}

我是否可以仅使用ng-model指令正确格式化，或者我是否需要在控制器中进行更多工作来格式化body和field_platform？

Answer 1

有关两种解决方案，请参阅plunker

解决方案1：

如果您使用的是角度v1.3，则可以使用ngModelOptions并将gettersetter选项设置为true。然后重新构建模型以获得getter和setter：

  $scope.lfg = {
    field_platform1: null,
    fieldPlatformFn: function(value) {
      return arguments.length ? this.setFieldPlatForm(value): this.getFieldPlatForm();
    },
    getFieldPlatForm: function() {
      return this.field_platform1 && this.field_platform1.length > 0 && this.field_platform1[0].id;
    },
    setFieldPlatForm: function(value) {
      return this.field_platform1 = [{"id": parseInt(value)}];
    }
  };

，您的选择必须引用gettersetter

中的ng-model功能

<select
    id="platform"
    name="platform"
    class="form-control"
    ng-model="lfg.fieldPlatformFn"
    ng-model-options="{getterSetter: true}">

解决方案2：

创建自己的指令以格式化并使用ngModelController parsers and formatters

app.directive('toArray', [function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elem, attr, ngModelCtrl) {
      ngModelCtrl.$formatters.push(function(value) {
        return value && value.length > 0 && value[0].id;
      });

      ngModelCtrl.$parsers.push(function(value) {
        return [{id: parseInt(value)}];
      });
    }
  }
}]);

使用标记：

  <select
    id="platform2"
    name="platform"
    class="form-control"
    ng-model="lfg.field_platform2"
    to-array="">

Answer 2

BigglesWorth

我认为最合适的方法是将数组格式化，但可能要求很高。你可以做的是$watch('model', function(){})你的模型，然后做魔术。您甚至可能有另一个变量用于获取正确的格式化对象，并避免嵌套对象数组。

希望这会对你有所帮助

Angular JS表单模型值更改为数组

2 个答案: