Angular JS表单模型值改为数组

Question

我在 angular 中有一个相当正常的表单，带有标题，body 字段，还有一个带有选项列表的下拉列表 select。这些选项是硬编码的，但后端只接受 object 的数组，而 body 接受带有 object 的键。

我的输入目前看起来是这样的：

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

正如预期的那样 returns:

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

但是我需要 field_platform 到 return:

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

我能否仅使用 ng-model 指令正确格式化它，还是我必须在控制器中做更多的工作才能格式化 body 和 field_platform？

Answer 1

比格斯沃思

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

希望对您有所帮助

Answer 2

请参阅 plunker 了解两种解决方案

解决方案一：

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

并且您的 select 将必须引用 ng-model

中的 gettersetter 函数

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

方案二：

创建您自己的格式化程序指令并使用 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="">

Angular JS表单模型值改为数组

Angular JS form model value changed to an array

javascript

angularjs

angular-ngmodel