只提交在angularjs

Question

检查值从形式作为图像上面，形式包含10个输入字段和10个检查boxes.I要发送的文本框的值，只有当被选中复选框。如果该值包含值并且复选框未选中，则应跳过相应的文本框值。 这是我的登录表单代码。

<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）你的后端代码可以忽略文本输入字段，如果没有相应的复选框值