NG-モデルは動作しません

Question

ここ

は私のマークアップです：

<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> 

そして、ここで私の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 
      }] 
     }] 
    }] 
} 
} 

すべては私が収集する必要があることを除いて、完璧に動作しますデータがアクションの最後にあり、ng-model（例：optionsForm。{{input.value}}）に設定された特定の識別子が必要です。上記のコードで構文エラーが発生しています。誰かが私が間違っていることを教えてもらえますか？

Answer 1

正しい構文は次のようになります。

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

これは、変数名でオブジェクトのプロパティにアクセスすることを可能にすること、bracket notationです。

Answer 2

まず、あなたのid = "optionsTable"を削除してください。あなたはそれを繰り返し、IDは一意でなければなりません。 二 - あなたはinput.valueするためにそれをバインドするだけです：

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

は、ここに私のplunkerを参照してください： http://plnkr.co/edit/zh8P0Kpc1d3fOwE9xCod