我有两个带有文本字段的列。您可以使用组合框选择文本字段的数量。这是第一张图片
当我从右侧选择文本字段的数量时,您可以遇到这种情况。
到目前为止一切顺利,但是当我在左侧选择 0 时,第二列会出现在左侧。
当我选择 0 时,我希望右边的列留在他的位置而不是左边。我该怎么做?
代码:
<div class="form-group">
<label>Invulveld 1:</label>
<input ng-hide="vm.datasource.billLevel < 1 " type="text" ng-model="vm.datasource.text1Bill" style="width:148px;" />
<input ng-hide="vm.datasource.contractLevel < 1" type="text" ng-model="vm.datasource.text1Contract" style="margin-right:153px; width:156px;" />
</div>
<div class="form-group">
<label>Invulveld 2:</label>
<input ng-hide="vm.datasource.billLevel < 2" type="text" ng-model="vm.datasource.text2Bill" style="width:148px;" />
<input ng-hide="vm.datasource.contractLevel < 2" type="text" ng-model="vm.datasource.text2Contract" style="margin-right:153px; width:156px;" />
</div>
<div class="form-group">
<label>Invulveld 3:</label>
<input ng-hide="vm.datasource.billLevel < 3" type="text" ng-model="vm.datasource.text3Bill" style="width:148px;" />
<input ng-hide="vm.datasource.contractLevel < 3" type="text" ng-model="vm.datasource.text3Contract" style="margin-right:153px; width:156px;" />
</div>
<div class="form-group">
<label>Invulveld 4:</label>
<input ng-hide="vm.datasource.billLevel < 4" type="text" ng-model="vm.datasource.text4Bill" style="width:148px;" />
<input ng-hide="vm.datasource.contractLevel < 4" type="text" ng-model="vm.datasource.text4Contract" style="margin-right:153px; width:156px;" />
</div>
<div class="form-group">
<label>Invulveld 5:</label>
<input ng-hide="vm.datasource.billLevel < 5" type="text" ng-model="vm.datasource.text5Bill" style="width:148px;" />
<input ng-hide="vm.datasource.contractLevel < 5" type="text" ng-model="vm.datasource.text5Contract" style="margin-right:153px; width:156px;" />
</div>
最佳答案
有很多方法可以实现你想要的, 它必须包括 float 、固定宽度。
这是一个非常推荐的包含中继器的解决方案
HTML:
<div class="wrapper" ng-app="myApp" ng-controller="Ctrl">
<div class="left">
<select ng-model="vm.selectLeft">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>
<div>
<input ng-repeat="txt in getText('left',vm.selectLeft) track by $index" ng-value="txt" />
</div>
</div>
<div class="right">
<select ng-model="vm.selectRight">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>
<div>
<input ng-repeat="txt in getText('right',vm.selectRight) track by $index" ng-value="txt"/>
</div>
</div>
</div>
CSS:
.wrapper{
width: 400px;
}
.left,
.right{
float:left;
width: 40%;
margin:10px;
}
select, input{
width:100%;
}
.wrapper input {
margin-top: 10px;
}
JS:
var app = angular.module('myApp', []);
app.controller('Ctrl', ['$scope', function($scope) {
$scope.getText = function(txt, length) {
var newArr = [];
for (var i = 0; i < length; i++) {
newArr.push(txt + i);
}
return newArr;
}
}]);
关于css - 如何固定第二列的位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38239384/