如上图所示,表单包含10个输入字段和10个复选框。我想仅在选中复选框时才发送文本框值。如果值包含值并且未选中复选框,则应跳过相应的文本框值。 这是我的登录表单代码。
<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>
答案 0 :(得分:1)
有几个选择:
1)清除输入字段。
2)未选中复选框时禁用输入字段
3)尝试组织标记,使复选框与输入字段分开。
4)如果没有相应的复选框值,您的后端代码可能会忽略文本输入字段
答案 1 :(得分: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);
}
});