Question

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

基本上，对象看起来像这样：

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

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

基本上，如果您在行中的标记名称中输入“With all of these”作为标签，则需要在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>

现在，如果你真的需要精确：1，否则没有，修改复选框：

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

在控制器中定义change func：

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

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

1 个答案: