Wert senden, wenn das Kontrollkästchen in angularjs aktiviert ist

Ich möchte Werte aus dem Formular senden, deren Werte überprüft werden. Hier ist meine codepen http://codepen.io/surajkhanal/pen/PbPGgJ Wert senden, wenn das Kontrollkästchen in angularjs aktiviert ist

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>

Und das andere Problem ist, wenn ich die Daten an das Feld zu füllen und nicht markiert das Kontrollkästchen das Eingabefeld versteckt. Wie man dieses Problem verhindert?

Quelle

2016-11-09 Suraz Khanal

Können Sie Ihr Szenario in welcher Situation das Eingabefeld sollte gezeigt und erklären, wenn das Kontrollkästchen aktiviert werden kann? –

@PitchiahNatarajan Das Szenario ist, dass, wie im Snippet möchte ich nur Wert senden, die überprüft werden. Und es gibt auch ein Problem, wenn ich zwei weitere Kontrollkästchen aktiviert und wenn ich die vorherige deaktiviert ist die nächste ist ausgeblendet. –

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>

Quelle

2016-11-09 09:26:08 NagaPrasad

Ich kenne diese Dinge, aber ich möchte hier überprüfen, ob der Wert, der geprüft wird, nur an die Steuerung senden soll. –

einmal prüfen @SurazKhanal – NagaPrasad

Wert senden, wenn das Kontrollkästchen in angularjs aktiviert ist

Antwort

Verwandte Themen