仅提交表格中的检查值w /预填充数据 - AngularJs

时间:2016-11-30 19:08:08

标签: javascript angularjs forms

我有一个带有复选框的表单,并且只想提交选中的值。我们的想法是使用API​​中的数据预填充表单字段。默认情况下,这些字段在加载时将被禁用,并且可以通过选中任何框来启用它们进行编辑/提交。每个字段都有自己的ng-model,这是一个对象,我想只看到提交时检查的值。

这是表单的截图,现在我没有看到预先填充的数据。我从value设置了$scope.preData属性,但我认为它被ng-model="jsonForm"覆盖了。

enter image description here

这是前数据的api对象

{
  header: 'header predata',
  delimiter: 'delimiter predata',
  filename: 'filename predata'
}

这是我的控制器:

$http({
                  method: 'GET',
                  url: 'api/templates/1',
                  headers: {
                      'Authorization': 'Bearer ' + tokenService.getToken()
                  }

                }).then(function(response) {

                  $scope.preData = response.data;

                });

$scope.submitJSON = function(form){
            console.log(form);
          }

html表单

<form ng-submit="submitJSON(jsonForm)">
<div class="form-group row">
<label for="headerInput" class="col-xs-2 col-form-label">Header</label>
<div class="col-xs-4">
  <input class="form-control" value="preData.header" type="text" id="headerInput" ng-disabled="headerRedirect==false" ng-model="jsonForm.params.header">
</div>
<div class="checkbox">
  <label class="col-xs-4">
    <input type="checkbox" ng-model="headerRedirect"> Enable
  </label>
</div>
</div>

<div class="form-group row">
 <label for="delimiterInput" class="col-xs-2 col-form-label">Delimiter</label>
 <div class="col-xs-4">
  <input class="form-control" type="text"  id="delimiterInput"
  value="{{preData.delimiter}}"
  ng-disabled="delimiterRedirect==false" ng-model="jsonForm.params.delimiter">
 </div>
 <div class="checkbox">
  <label class="col-xs-4">
    <input type="checkbox" ng-model="delimiterRedirect"> Enable
  </label>
 </div>
 </div>
 <div class="form-group row">
 <label for="filenameInput" class="col-xs-2 col-form-label">Filename</label>
 <div class="col-xs-4">
  <input class="form-control" type="text"  id="filenameInput" ng-disabled="filenameRedirect==false" ng-model="jsonForm.params.filename" value="{{preData.filename}}">
 </div>
 <div class="checkbox">
  <label class="col-xs-4">
    <input type="checkbox" ng-model="filenameRedirect"> Enable
  </label>
 </div>
 </div>
 <div class="form-group row">
 <button type="submit" name="button" class="btn btn-default">Submit</button>
 </div>
 </form>

我尝试ng-true-value,但这不起作用。我还将response.data设置为$scope.jsonForm,它填充了它,但是当我使用选中字段提交时,它提交了所有字段而不是已检查字段。请让我知道我做错了什么。现在当我启用一个字段并输入一个值时,我能够看到检查的值。如果我能看到加载前的数据并检查其中任何一个是否想要提交所选数据,那将是非常棒的。

例如,如果我只选中了标题,我的预期输出将是:

{
  params: {
    header: 'my value'
  }
}

提前感谢您的帮助。

0 个答案:

没有答案