submit only checked value from form in angularjs

Question

As in the image above, the form contains 10 input field and 10 check boxes.I want to send text box values only when check box is checked. If the value contains value and check box is unchecked , this should skip corresponding text box value. This is my login form code.

<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

Several options:

1) Clear the input fields.

2) Disable the input fields when checkbox not checked

3) Try and organise your markup so that the check boxes are in a separate form from the input fields.

4) Your back end code could ignore the text input field if there is no corresponding checkbox value

Answer 2

Update

Here a version with processing in controller-side when form is submitted. I did the job only for two first cases as it is still awkward in this way. Here a modified version of the pen : pen I used an array to avoid using var (first, second, ...) for each input as you had used. The solution addresses your problem but it is still improvable. The idea would be to render dynamically each input with a function and a ng-repeat directive. Sorry, I cannot take the time now to do that.
Anyway, it gives you a first step to go on :)

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);
  }

});