ng-Modell innerhalb ng-Wiederholung funktioniert nicht

Question

Hier ist mein 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> 

Und hier ist meine 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 
      }] 
     }] 
    }] 
} 
} 

Alles funktioniert perfekt, mit der Ausnahme, dass ich das sammeln Daten am Ende der Aktion und ich brauche spezifische Bezeichner als ng-Modell (zB optionsForm. {{input.value}}), und ich bekomme immer einen Syntaxfehler mit dem obigen Code. Kann mir jemand sagen, was ich falsch mache?

Answer 1

korrekte Syntax wäre:

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

Dies ist bracket notation, dass Sie Objekteigenschaft durch Variablennamen zugreifen können.

Answer 2

Es gibt ein paar Dinge, die Sie tun müssen: zuerst - entfernen Sie Ihre ID = "OptionsTable". Sie haben eine Wiederholung und Ids müssen eindeutig sein. Zweitens - Sie brauchen nur zu binden input.value:

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

meinen Plunker Siehe hier: http://plnkr.co/edit/zh8P0Kpc1d3fOwE9xCod