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

Question

我有一个相当正常的 Angular 形式，带有标题、正文字段，还有一个带有选项列表的下拉选择。这些选项是硬编码的，但后端仅接受对象数组，而主体接受带有对象的键。

我的输入当前如下所示:

<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 指令正确格式化它，还是需要在 Controller 中做更多工作来格式化 body 和 field_platform？

Answer 1

参见plunker对于这两种解决方案

解决方案 1:

如果您使用的是 Angular 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)}];
    }
  };

并且您的选择必须引用 ng-model 中的 gettersetter 函数

<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="">