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

有很多方法可以达到你想要的效果，它必须包括浮动，固定宽度。

这是一个包含非常推荐的转发器的解决方案

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

我怎样才能确定第二个柱子的位置？

1 个答案: