2016-08-04 23 views
0

我在Angular(1.x)中創建一個表單,並使用ng-model和JSON預先填充選中的收音機和複選框。出於某種原因,直到我再次手動檢查收音機或複選框元素時,預填充值纔會顯示在表單範圍中。我如何獲取表單數據以收集預先填充的輸入?在ng-submit上捕獲預定義的輸入

下面是代碼:

<tr ng-repeat="option in item.reportOptions" > 
      <td style="width: 100%;"> 
    <h5><strong>{{option.title}}</strong></h5> 
    <!-- Check All --> 
    <div class="form-group" ng-if="option.type=='checkbox'"> 
    <label for="{{option.name}}" class="checkbox-inline">(check all)&nbsp;&nbsp;<strong>{{option.label}}</strong> 
     <input type="checkbox" name="{{option.name}}" ng-model="checkAll" ng-value="{{option.value}}" ng-checked="option.checked==true" ng-click="selectAll()"> 
     </label> 
    </div> 
    <!-- Person --> 
    <div class="form-group" ng-if="option.type=='select' && option.name=='person'"> 
      <select ng-model="cerOptions.primary"> 
       <option ng-init="cerOptions.primary=user[0]" ng-repeat="user in selectionData" ng-value="{{user.NewID}}">{{user.NewID}}--{{user.lastName}},{{user.firstName}}</option> 
      </select> 
    </div> 
    <!-- Mask Names --> 
    <div class="form-group" ng-if="option.type=='select' && option.name=='maskNames'"> 
      <select name="{{option.name}}" ng-model="maskNames"> 
       <option ng-selected="maskNames == option.value" ng-repeat="opt in option.options" ng-value="opt.value">{{opt.label}}</option> 
      </select> 
      <div ng-if="maskNames=='yes'"> 
      <p class="help-text">Check the user you would like to mask, then enter name.</p> 
       <div class="form-group" ng-repeat="user in selectionData"> 
       <div class="col-sm-2"> 
        <label class="checkbox-inline">{{user.NewID}}--{{user.lastName}},{{user.firstName}} 
         <input type="checkbox" ng-model="toggleText"> 
        </label> 
       </div> 
       <div class="col-sm-2"> 
        <input type="text" ng-if="toggleText" ng-model="cerOptions.maskName[user.NewID]" value="Person{{$index}}"> 
       </div> 
       </div> 
      </div> 
    </div> 
    <!-- Name Tags --> 
    <div class="form-group" ng-if="option.type=='nameTag'"> 
     <table class="table table-striped table-condensed" style="width: 50%;"> 
      <thead> 
       <tr> 
        <th>New ID</th> 
        <th>Last Name</th> 
        <th>First Name or Nickname</th> 
        <th>Company</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="user in selectionData"> 
        <td>{{user.NewID}}</td> 
        <td><input type="text" ng-model="cerOptions.nameTagsLast[user.NewID]" ng-init="cerOptions.nameTagsLast[user.NewID]=[user.lastName]" value="{{user.lastName}}"></td> 
        <td><input type="text" ng-model="cerOptions.nameTagsFirst[user.NewID]" ng-init="cerOptions.nameTagsFirst[user.NewID]=[user.firstName]" value="{{user.firstName}}"></td> 
        <td><input type="text" ng-model="cerOptions.nameTagsComp[user.NewID]" ng-init="cerOptions.nameTagsComp[user.NewID]=[user.accountName]" value="{{user.accountName}}"></td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
    <!-- Nested Checkboxes and Radios --> 
    <div class="form-group" ng-if="option.options.length > 0"> 
     <label ng-repeat="deet in option.options" ng-if="deet.type=='radio'" for="{{deet.name}}" class="radio-inline">{{deet.label}} 
     <input type="radio" name="{{deet.name}}" ng-model="cerOptions.options[deet.name]" ng-value="{{deet.value}}"> 
     </label> 
     <label ng-repeat="deet in option.options" ng-if="deet.type=='checkbox'" for="{{deet.name}}" class="checkbox-inline">{{deet.label}} 
     <input type="checkbox" name="{{deet.name}}" ng-model="cerOptions.options[deet.name]" ng-value="{{deet.value}}" ng-checked="{{deet.checked}}"> 
     </label> 
    </div> 
+3

你能發佈代碼嗎? –

+0

我添加了代碼。 –

+0

嗯,這是一個有問題的功能,我還沒有完善。這可能是原因嗎?我發佈是因爲我認爲解決方案可能與使用$ watch指令有關。我正試圖實現正常的默認行爲?如果是這樣,那給了我一個解決現有代碼問題的方向。 –

回答

0

原來我只需要初始化使用輸入元件上NG-INIT的模型值。