在angularjs中仅提交表单中的检查值

Question

如上图所示，表单包含 10 个输入字段和 10 个复选框。我只想在选中复选框时发送文本框值。如果该值包含 value 并且复选框未选中，则应跳过相应的文本框值。 这是我的登录表单代码。

<form id="valueForm" ng-submit="saveValues(values,success)">
<div class="small-input list padding" style="padding-top:4px;">

  <label class="item item-input">
    <input type="text" placeholder="In a word, what is important to you?" ng-model="values.first" ng-change="changeStatus(values.first,success.first)">
     <ion-checkbox  ng-model="success.first"   ng-true-value="true" ng-false-value="true"  ng-checked="checked" ng-disabled="!values.first" style="border: none;padding-left: 30px;" class="checkbox-royal"></ion-checkbox>
  </label>

  <label class="item item-input" ng-show="success.first" ng-class="{'animated-custom slideInLeft':success.first}">
    <input type="text" placeholder="What else is important to you?" ng-model="values.second" >
    <ion-checkbox class="checkbox-royal" ng-model="success.second" ng-false-value="true" ng-disabled="!values.second" style="border: none;padding-left: 30px;"></ion-checkbox>
  </label>

  <label class="item item-input" ng-show="success.second" ng-class="{'animated-custom slideInLeft':success.second}">
    <input type="text" placeholder="What else is important to you?" ng-model="values.third">
    <ion-checkbox class="checkbox-royal" ng-model="success.third" ng-false-value="true" ng-disabled="!values.third" style="border: none;padding-left: 30px;"></ion-checkbox>
  </label>

  <label class="item item-input" ng-show="success.third" ng-class="{'animated-custom slideInLeft':success.third}">
    <input type="text" placeholder="What else is important to you?" ng-model="values.four">
    <ion-checkbox class="checkbox-royal" ng-model="success.four" ng-false-value="true" ng-disabled="!values.four" style="border: none;padding-left: 30px;"></ion-checkbox>
  </label>

  <label class="item item-input" ng-show="success.four" ng-class="{'animated-custom slideInLeft':success.four}">
    <input type="text" placeholder="What else is important to you?" ng-model="values.five">
    <ion-checkbox class="checkbox-royal" ng-model="success.five" ng-false-value="true" ng-disabled="!values.five" style="border: none;padding-left: 30px;"></ion-checkbox>
  </label>

  <label class="item item-input" ng-show="success.five" ng-class="{'animated-custom slideInLeft':success.five}">
    <input type="text" placeholder="What else is important to you?" ng-model="values.six">
    <ion-checkbox class="checkbox-royal" ng-model="success.six"  ng-false-value="true"ng-disabled="!values.six" style="border: none;padding-left: 30px;"></ion-checkbox>
  </label>

  <label class="item item-input" ng-show="success.six" ng-class="{'animated-custom slideInLeft':success.six}">
    <input type="text" placeholder="What else is important to you?" ng-model="values.seven">
    <ion-checkbox class="checkbox-royal" ng-false-value="true" ng-model="success.seven" style="border: none;padding-left: 30px;"></ion-checkbox>
  </label>

  <label class="item item-input" ng-show="success.seven" ng-class="{'animated-custom slideInLeft':success.seven}">
    <input type="text" placeholder="What else is important to you?" ng-model="values.eight">
    <ion-checkbox  class="checkbox-royal" ng-model="success.eight" ng-false-value="true" style="border: none;padding-left: 30px;"></ion-checkbox>
  </label>

  <label class="item item-input" ng-show="success.eight" ng-class="{'animated-custom slideInLeft':success.eight}">
    <input type="text" placeholder="What else is important to you?" ng-model="values.nine">
    <ion-checkbox class="checkbox-royal" ng-false-value="true" ng-model="success.nine" style="border: none;padding-left: 30px;"></ion-checkbox>
  </label>

  <label class="item item-input" ng-show="success.nine" ng-class="{'animated-custom slideInLeft':success.nine}">
    <input type="text" placeholder="What else is important to you?" ng-model="values.ten">
    <ion-checkbox class="checkbox-royal"  ng-model="success.ten" style="border: none;padding-left: 30px;"></ion-checkbox>
  </label>

        <button type="submit" ng-show="success.first" class="button button-dark button-shadow pull-right" style="" ><i class="ion-ios-arrow-forward"></i></button>
</div>
</form>

Answer 1

更新

这里是提交表单时在控制器端进行处理的版本。 我只为前两个案例做了这项工作，因为这样仍然很尴尬。 这是笔的修改版本：pen 我使用了一个数组来避免像您使用的那样对每个输入使用 var (first, second, ...)。该解决方案解决了您的问题，但仍然可以改进。想法是使用函数和ng-repeat 指令动态呈​​现每个输入。 抱歉，我现在不能花时间这样做。
无论如何，它让你迈出了第一步:)

HTML：

<html ng-app="myIonic">

  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Multiple input</title>

  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

  </head>

  <body ng-controller="appCtrl">
    <form id="valueForm" ng-submit="saveValues()">
    <div class="small-input list padding" style="padding-top:4px;">

      <label class="item item-input">
        <input type="text" placeholder=" what is important to you?" ng-model="values[0].text" >
        <ion-checkbox  ng-change="show2='true'" ng-model="values[0].isChecked"  
               ng-disabled="!values[0].text" style="border: none;padding-left: 30px;" class="checkbox-royal"></ion-checkbox>
      </label>

      <label class="item item-input" ng-show="show2">
        <input type="text" placeholder="What else is important to you?" ng-model="values[1].text" >    
        <ion-checkbox class="checkbox-royal" ng-model="values[1].isChecked"  ng-change="show3='true'" ng-disabled="!values[1].text" style="border: none;padding-left: 30px;"></ion-checkbox>
      </label>   

      <button type="submit" ng-show="show2"  class="button button-dark button-shadow pull-right" style="" ><i class="ion-ios-arrow-forward"></i></button>
    </div>
    </form>
  </body>

</html>

JS：

angular.module('myIonic',['ionic'])
.controller('appCtrl',function($scope){      
  $scope.values = [];

  $scope.saveValues = function(){
     console.log("saveValues");        
     var valueTextsChecked=[];

     // keep only input with checkbox selected
     for (var i=0; i<$scope.values.length;i++){    
       var value = $scope.values[i];
       if (value.isChecked){
           valueTextsChecked.push(value.text);
       }
     }
    console.log("valueTextsChecked="+valueTextsChecked);
  }

});

Answer 2

几个选项：

1) 清除输入字段。

2) 未选中复选框时禁用输入字段

3) 尝试组织您的标记，使复选框与输入字段处于不同的表单中。

4) 如果没有对应的复选框值，您的后端代码可能会忽略文本输入字段