Question

Here is my markup:

<table class="table table-striped hover-table" ng-repeat="item in optionsData" id="optionsTable">
    <thead>
            <tr>
                <th class="trigger-man" ng-model="showOptions" ng-click="showOptions = !showOptions">{{item.reportName}}<span class="pull-right glyphicon" ng-class="{'glyphicon-chevron-right': !showOptions, 'glyphicon-chevron-down': showOptions}"></span></th>
            </tr>
        </thead>
      <tbody ng-show="showOptions">
        <tr ng-if="item.hasOptions == false">
            <td>No options available.</td>
        </tr>
        <tr ng-if="item.hasOptions == true && option.title.length > 0" ng-repeat="option in item.reportOptions">
            <td><div class="alert alert-info"><strong>{{option.title}}</strong></div><br>
            <!--If text or select-->
                <div class="form-group" ng-repeat="input in option.inputs" ng-if="option.type == 'text' || optionType == 'select'">
                    <label for="{{input.label}}" class="col-md-3 control-label">{{input.label}}</label>
                    <div class="col-md-7 col-shiv">
                      <input class="form-control" type="{{option.type}}" placeholder="{{input.label}}" name="{{input.label}}" ng-model="optionsForm.{{input.value}}" />
                    </div>
                </div>
             <!-- if radio or checkbox-->
             <div class="form-group" ng-repeat="input in option.inputs" ng-if="option.type == 'radio' || option.type == 'checkbox'">
          <label for="{{input.label}}" class="col-md-3 control-label">{{input.label}}
            <input type="{{option.type}}" name="{{input.label}}" id="{{input.label}}" value="{{input.value}}" ng-model="optionsForm.{{input.value}}">
            </label>

        </div>
            </td>
        </tr>

      </tbody>
    </table>

And here is my JSON:

{
"code": 0,
"message": "",
"data": {
    "reports": [{
        "reportID": 16,
        "reportName": "Comprint",
        "hasOptions": true,
        "reportOptions": [{
            "title": "Comprint - sections to print",
            "type": "checkbox",
            "inputs": [{
                "label": "Some Interests \/ Some Map Coordinates",
                "value": "comprint_module_interests_coords",
                "name": "Comprint_modules[]",
                "checked": true
            }, {
                "label": "Some Components",
                "value": "comprint_module_components",
                "name": "Comprint_modules[]",
                "checked": true
            }, {
                "label": "Organizational Focus",
                "value": "comprint_module_organizationalfocus",
                "name": "Comprint_modules[]",
                "checked": true
            }, {
                "label": "Some Perspectives",
                "value": "comprint_module_perspectives",
                "name": "Comprint_modules[]",
                "checked": true
            }, {
                "label": "Work Styles",
                "value": "comprint_module_workstyles",
                "name": "Comprint_modules[]",
                "checked": true
            }, {
                "label": "Log",
                "value": "comprint_module_log",
                "name": "Comprint_modules[]",
                "checked": true
            }]
        }, {
            "title": "Comprint - sort type",
            "type": "radio",
            "inputs": [{
                "label": "Sort In Order Selected",
                "value": "default",
                "name": "Comprint_sort_type",
                "checked": true
            }, {
                "label": "Sort Last Names Alphabetically",
                "value": "alpha_lastname",
                "name": "Comprint_sort_type",
                "checked": false
            }]
        }, {
            "label": "Comprint - Comparison Print Person",
            "name": "Comprint_person",
            "type": "select",
            "options": [{
                "text": "yes",
                "value": "yes",
                "selected": false
            }, {
                "text": "no",
                "value": "no",
                "selected": true
            }]
        }, {
            "label": "Comprint - Dictionary Page",
            "name": "Comprint_dictionary_page",
            "type": "select",
            "options": [{
                "text": "yes",
                "value": "yes",
                "selected": true
            }, {
                "text": "no",
                "value": "no",
                "selected": false
            }]
        }, {
            "label": "Comprint - Mask Names",
            "name": "Comprint_masknames",
            "type": "select",
            "options": [{
                "text": "yes",
                "value": "yes",
                "selected": false
            }, {
                "text": "no",
                "value": "no",
                "selected": true
            }]
        }]
    }]
}
}

Everything works perfectly, except that I need to collect the data at the end of the action and I need specific identifiers set as the ng-model (eg optionsForm.{{input.value}}), and I keep getting a syntax error with the code above. Can anyone tell me what I'm doing wrong?

Answer 1

Correct syntax would be:

ng-model="optionsForm[input.value]"

This is bracket notation, that allows you to access object property by variable name.

Answer 2

There's a couple things you need to do: first - remove your id="optionsTable". You have a repeat on that and ids must be unique. Second - you need only to bind it to input.value:

<input class="form-control" type="{{option.type}}" placeholder="{{input.label}}" name="{{input.label}}" ng-model="input.value" />

See my plunker here: http://plnkr.co/edit/zh8P0Kpc1d3fOwE9xCod

ng-model inside ng-repeat doesn't work

2 个答案: