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