Christian Hill Christian Hill - 4 months ago 47
AngularJS Question

ng-model inside ng-repeat doesn't work

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

Correct syntax would be:

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

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

Comments