Question

我在Angular（1.x）中创建表单并使用ng-model和JSON预先填充已检查的无线电和复选框。出于某种原因，预先填充的值不会在表单范围中显示，直到我再次手动检查radio或checkbox元素。如何获取表单数据以收集预先填充的输入？

以下是代码：

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

Answer 1

事实证明我只需要在输入元素上使用ng-init初始化模型值。

在ng-submit上捕获预定义的输入

1 个答案: