のみ上記画像のように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

ここ更新

フォームが送信されるコントローラ側の処理とのバージョンが存在しない場合、テキスト入力フィールドを無視する可能性があなたのバックエンド・コード。 私は2つの最初のケースでのみ仕事をしましたが、それはまだこのように厄介です。 ここでペンの修正バージョン：pen 私はあなたが使ったように各入力にvar（first、second、...）を使わないように配列を使いました。解決策はあなたの問題を解決しますが、それはまだ改善可能です。この考え方は、各入力を関数とng-repeatディレクティブで動的にレンダリングすることです。 申し訳ありませんが、私は今それを行う時間を取ることができません。

<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）は、チェックボックスが をチェックしていないとき）の入力フィールドを無効にしてみて、チェックボックスが入力フィールドとは別の形になるように、あなたのマークアップを整理します。

4）は、対応するチェックボックスの値