Question

我想从表单中发送检查值的值。这是我的codepen http://codepen.io/surajkhanal/pen/PbPGgJ

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">
	    <input type="text"  ng-model="values.first">
	     <ion-checkbox  ng-model="success.first"  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 && values.first" >
	    <input type="text"  ng-model="values.second" >
	    <ion-checkbox class="checkbox-royal" ng-model="success.second" ng-disabled="!values.second" style="border: none;padding-left: 30px;"></ion-checkbox>
	  </label>

        <label class="item item-input" ng-show="success.second && values.second" >
	    <input type="text"  ng-model="values.third">
	    <ion-checkbox class="checkbox-royal" ng-model="success.third" ng-disabled="!values.third" style="border: none;padding-left: 30px;"></ion-checkbox>
	  </label>

        <label class="item item-input" ng-show="success.third && values.third">
	    <input type="text"  ng-model="values.four">
	    <ion-checkbox class="checkbox-royal" ng-model="success.four" ng-disabled="!values.four" style="border: none;padding-left: 30px;"></ion-checkbox>
	  </label>

        <label class="item item-input" ng-show="success.four && values.four">
	    <input type="text" ng-model="values.five">
	    <ion-checkbox class="checkbox-royal" ng-model="success.five" ng-disabled="!values.five" 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="">Submit</button>
      </div>
    </form>

  </ion-content>

</body>

</html>

另一个问题是当我将数据填充到字段并取消选中输入字段隐藏的复选框时。如何防止这个问题？

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

<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">
	    <input type="text"  ng-model="values.first">
	     <ion-checkbox  ng-model="success.first"  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 && values.first" >
	    <input type="text"  ng-model="values.second" >
	    <ion-checkbox class="checkbox-royal" ng-model="success.second" ng-disabled="!values.second" style="border: none;padding-left: 30px;"></ion-checkbox>
	  </label>

        <label class="item item-input" ng-show="success.second && values.second" >
	    <input type="text"  ng-model="values.third">
	    <ion-checkbox class="checkbox-royal" ng-model="success.third" ng-disabled="!values.third" style="border: none;padding-left: 30px;"></ion-checkbox>
	  </label>

        <label class="item item-input" ng-show="success.third && values.third">
	    <input type="text"  ng-model="values.four">
	    <ion-checkbox class="checkbox-royal" ng-model="success.four" ng-disabled="!values.four" style="border: none;padding-left: 30px;"></ion-checkbox>
	  </label>

        <label class="item item-input" ng-show="success.four && values.four">
	    <input type="text" ng-model="values.five">
	    <ion-checkbox class="checkbox-royal" ng-model="success.five" ng-disabled="!values.five" 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="">Submit</button>
      </div>
    </form>

  </ion-content>

</body>

</html>

＆＃13;

在angularjs中选中复选框时提交值

1 个答案: