anglejsでチェックボックスがチェックされている場合に値を送信

値がチェックされたフォームから値を送信したいと思います。ここは私codepen http://codepen.io/surajkhanal/pen/PbPGgJ anglejsでチェックボックスがチェックされている場合に値を送信

angular.module('ionicApp',['ionic']) 
 
.controller('myctrl',function($scope){ 
 
    
 
})

.button-dark{ 
 
    margin-top:10px; 
 
}

<html ng-app="ionicApp"> 
 

 
<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="myctrl"> 
 

 
    <ion-header-bar class="bar-positive"> 
 
    <h1 class="title">Ionic app</h1> 
 
    </ion-header-bar> 
 
    <ion-content> 
 
    <form id="valueForm" ng-submit="saveValues(values)"> 
 
     <div class="small-input list padding" style="padding-top:4px;"> 
 

 
     <label class="item item-input"> 
 
\t  <input type="text" ng-model="values.first"> 
 
\t  <ion-checkbox ng-model="success.first" ng-disabled="!values.first" style="border: none;padding-left: 30px;" class="checkbox-royal"></ion-checkbox> 
 
\t </label> 
 

 
     <label class="item item-input" ng-show="success.first && values.first" > 
 
\t  <input type="text" ng-model="values.second" > 
 
\t  <ion-checkbox class="checkbox-royal" ng-model="success.second" ng-disabled="!values.second" style="border: none;padding-left: 30px;"></ion-checkbox> 
 
\t </label> 
 

 
     <label class="item item-input" ng-show="success.second && values.second" > 
 
\t  <input type="text" ng-model="values.third"> 
 
\t  <ion-checkbox class="checkbox-royal" ng-model="success.third" ng-disabled="!values.third" style="border: none;padding-left: 30px;"></ion-checkbox> 
 
\t </label> 
 

 
     <label class="item item-input" ng-show="success.third && values.third"> 
 
\t  <input type="text" ng-model="values.four"> 
 
\t  <ion-checkbox class="checkbox-royal" ng-model="success.four" ng-disabled="!values.four" style="border: none;padding-left: 30px;"></ion-checkbox> 
 
\t </label> 
 

 
     <label class="item item-input" ng-show="success.four && values.four"> 
 
\t  <input type="text" ng-model="values.five"> 
 
\t  <ion-checkbox class="checkbox-royal" ng-model="success.five" ng-disabled="!values.five" style="border: none;padding-left: 30px;"></ion-checkbox> 
 
\t </label> 
 

 
     
 

 
     <button type="submit" ng-show="success.first" class="button button-dark button-shadow pull-right" style="">Submit</button> 
 
     </div> 
 
    </form> 
 

 
    </ion-content> 
 

 
</body> 
 

 
</html>

であると私はフィールドにデータを記入し、チェックボックスの入力フィールドの皮をオフにするとき、別の問題があります。どのようにこの問題を防ぐには？

出典

2016-11-09 Suraz Khanal

あなたは、入力ボックスが示されなければならないとする]チェックボックスをチェックすることができたときにどのような状況で、あなたのシナリオを説明できますか？ –

@PitchiahNatarajanスニペットのように、値だけを送信したいと思っています。さらに2つのチェックボックスをチェックして、前のチェックボックスをオフにした場合、次のものが非表示になっています。 –

angular.module('ionicApp',['ionic']) 
 
.controller('myctrl',function($scope){ 
 
    $scope.saveValues = function(values, checked){ 
 
     console.log(values, checked);  
 
    angular.forEach(checked,function(value, key){ 
 
     if(value){ 
 
      angular.forEach(values, function(v,k){ 
 
      if(key == k && value){ 
 
       console.log(key , v) 
 
      } 
 
     }) 
 
     }  
 
    }) 
 
    }; 
 
})

.button-dark{ 
 
    margin-top:10px; 
 
}

<html ng-app="ionicApp"> 
 

 
<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="myctrl"> 
 

 
    <ion-header-bar class="bar-positive"> 
 
    <h1 class="title">Ionic app</h1> 
 
    </ion-header-bar> 
 
    <ion-content> 
 
    <form id="valueForm" ng-submit="saveValues(values,success)"> 
 
     <div class="small-input list padding" style="padding-top:4px;"> 
 

 
     <label class="item item-input"> 
 
\t  <input type="text" ng-model="values.first"> 
 
\t  <ion-checkbox ng-model="success.first" ng-disabled="!values.first" style="border: none;padding-left: 30px;" class="checkbox-royal"></ion-checkbox> 
 
\t </label> 
 

 
     <label class="item item-input" ng-show="success.first && values.first" > 
 
\t  <input type="text" ng-model="values.second" > 
 
\t  <ion-checkbox class="checkbox-royal" ng-model="success.second" ng-disabled="!values.second" style="border: none;padding-left: 30px;"></ion-checkbox> 
 
\t </label> 
 

 
     <label class="item item-input" ng-show="success.second && values.second" > 
 
\t  <input type="text" ng-model="values.third"> 
 
\t  <ion-checkbox class="checkbox-royal" ng-model="success.third" ng-disabled="!values.third" style="border: none;padding-left: 30px;"></ion-checkbox> 
 
\t </label> 
 

 
     <label class="item item-input" ng-show="success.third && values.third"> 
 
\t  <input type="text" ng-model="values.four"> 
 
\t  <ion-checkbox class="checkbox-royal" ng-model="success.four" ng-disabled="!values.four" style="border: none;padding-left: 30px;"></ion-checkbox> 
 
\t </label> 
 

 
     <label class="item item-input" ng-show="success.four && values.four"> 
 
\t  <input type="text" ng-model="values.five"> 
 
\t  <ion-checkbox class="checkbox-royal" ng-model="success.five" ng-disabled="!values.five" style="border: none;padding-left: 30px;"></ion-checkbox> 
 
\t </label> 
 

 
     
 

 
     <button type="submit" ng-show="success.first" class="button button-dark button-shadow pull-right" style="">Submit</button> 
 
     </div> 
 
    </form> 
 

 
    </ion-content> 
 

 
</body> 
 

 
</html>

出典

2016-11-09 09:26:08 NagaPrasad

私はこのことを知っていますが、ここではチェックされた値がコントローラに送られるべきかどうかをチェックしたいと思います。 –

一度チェック@SurazKhanal – NagaPrasad

anglejsでチェックボックスがチェックされている場合に値を送信

答えて

関連する問題