css - 如何固定第二列的位置？

Question

我有两个带有文本字段的列。您可以使用组合框选择文本字段的数量。这是第一张图片

当我从右侧选择文本字段的数量时，您可以遇到这种情况。

到目前为止一切顺利，但是当我在左侧选择 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>

Answer 1

有很多方法可以实现你想要的，它必须包括 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;
  }
}]);

Fiddle example