如何在 Angular 中从表单数据创建对象

Question

我有一个非常复杂的对象，我需要从 Angular 中的表单发送。

对象基本上是这样的：

vm.formData = {
   active: 1,
   parse_tree : {
       exlude: [],
       include: [],
       tag: ''
   },
   tag: '',
   term: ''
}

---

我的问题是在包含或排除数组中创建新对象。
不知道该怎么做。

基本上，如果您在以“所有这些”为标签的行内键入标签名称，则需要在 include 数组内创建一个新对象，并且如果您单击复选框 '精确匹配' 在标签输入旁边，需要添加exact : 1。如果未选中“完全匹配”，则为exact : 0。

---

parse_tree : {
   exlude: [],
   include: [
       {
           exact: 1,
           term: "hello"
       }
   ],
   tag: ''
}

我的表单 HTML：

<div class="row">
    <div class="col-sm-2 advanced-label">Main Tag:</div>
    <div class="col-sm-4">
        <input ng-model="tc.formData.term"
               id="new-main-tag"
               type="text"
               class="form-control"
               placeholder="tag">
        <input ng-model="tc.formData.parse_tree.include.obj.exact"
               ng-true-value="1" ng-false-value="0"
               for="new-main-tag"
               type="checkbox">
        <em>Exact match</em>
    </div>
    <div class="col-sm-4">
        <select ng-model="tc.formData.tag"
            class="form-control manage-source-input-tag">
            <option value="companies">companies</option>
            <option value="news" selected="">news</option>
            <option value="people">people</option>
            <option value="products">products</option>
        </select>
    </div>
    <div class="col-sm-2">
        <button ng-click="tc.showSimpleForm()"
            class="btn btn-info btn-sm switch-btn">Switch to simple</button>
    </div>
</div>

<div class="row">
    <div class="col-sm-2 advanced-label">
        With all of these:
    </div>
    <div class="col-sm-2">
        <input ng-model="tc.withAll1"
               id="with-all-1" type="text" class="form-control" placeholder="tag">
        <input type="checkbox" for="with-all-1">
        <em>Exact match</em>
    </div>
    <div class="col-sm-2">
        <input ng-model="tc.withAll2"
               id="with-all-2" type="text" class="form-control" placeholder="tag">
        <input type="checkbox" for="with-all-2">
        <em>Exact match</em>
    </div>
    <div class="col-sm-2">
        <input ng-model="tc.withAll3"
               id="with-all-3" type="text" class="form-control" placeholder="tag">
        <input type="checkbox" for="with-all-3">
        <em>Exact match</em>
    </div>
    <div class="col-sm-2">
        <input ng-model="tc.withAll4"
               id="with-all-4" type="text" class="form-control" placeholder="tag">
        <input type="checkbox" for="with-all-4">
        <em>Exact match</em>
    </div>
    <div class="col-sm-2">
        <input ng-model="tc.withAll5"
               id="with-all-5" type="text" class="form-control" placeholder="tag">
        <input type="checkbox" for="with-all-5">
        <em>Exact match</em>
    </div>
</div>

<div class="row">
    <div class="col-sm-2 advanced-label">
        With none of these:
    </div>
    <div class="col-sm-2">
        <input ng-model="tc.withNone1"
               id="with-none-1" type="text" class="form-control" placeholder="tag">
        <input type="checkbox" for="with-none-1">
        <em>Exact match</em>
    </div>
    <div class="col-sm-2">
        <input ng-model="tc.withNone1"
               id="with-none-2" type="text" class="form-control" placeholder="tag">
        <input type="checkbox" for="with-none-2">
        <em>Exact match</em>
    </div>
    <div class="col-sm-2">
        <input ng-model="tc.withNone1"
               id="with-none-3" type="text" class="form-control" placeholder="tag">
        <input type="checkbox" for="with-none-3">
        <em>Exact match</em>
    </div>
    <div class="col-sm-2">
        <input ng-model="tc.withNone1"
               id="with-none-4" type="text" class="form-control" placeholder="tag">
        <input type="checkbox" for="with-none-4">
        <em>Exact match</em>
    </div>
    <div class="col-sm-2">
        <input ng-model="tc.withNone1"
               id="with-none-5" type="text" class="form-control" placeholder="tag">
        <input type="checkbox" for="with-none-5">
        <em>Exact match</em>
    </div>
</div>

<div class="row">
    <div class="col-sm-2 advanced-label">Tag Notes:</div>
    <div class="col-md-5">
        <textarea></textarea>
        <input type="checkbox" aria-label="exact-match">
        <em>Unsure</em>
    </div>
    <div class="col-md-5"></div>
</div>

<div class="row advanced-action-row">
    <button class="btn btn-success btn-sm manage-term-add">Save</button>
</div>

Answer 1

对于包含：（对排除做同样的操作）

vm.formData = {
   active: 1,
   parse_tree : {
       exlude: [],
       include: [{}, {}, {}, {}, {}],
       tag: ''
   },
   tag: '',
   term: ''
}

使用 ng-repeat：

<div class="col-sm-2" ng-repeat="smth in vm.formData.parse_tree.include">
    <input ng-model="smth.term" type="text" class="form-control" placeholder="tag">
    <input type="checkbox" ng-model="smth.exact">
    <em>Exact match</em>
</div>

现在如果你真的需要exact:1 而没有别的，修改复选框：

<input type="checkbox" ng-click="change(smth)">

在控制器中定义更改函数：

if (smth.term) {
  delete smth.term;
} else {
  smth.term = 1;
}