javascript - Bootstrap 输入组和 AngularJS 动态内容

Question

在下面的例子中:

(function (angular) {
  var module = angular.module('test', []);
  
  module.controller('TestCtrl', ['$scope', function ($scope) {
    $scope.before = $scope.after = true;
    $scope.profile = [
      { key: 'Prop1', type: 'text', value: 'test' },
      { key: 'Prop2', type: 'number', value: 42 },
      { key: 'Prop3', type: 'complex', value: 15, extra: 1 },
    ];
  }]);
  
})(angular);
        
angular.element(document).ready(function () {
  angular.bootstrap(document, ['test']);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<form data-ng-controller="TestCtrl">
  <div class="form-group">
    <label class="control-label">
      <input type="checkbox" data-ng-model="before" />
      Show "before"
    </label>
  </div>
  <div class="form-group">
    <label class="control-label">
      <input type="checkbox" data-ng-model="after" />
      Show "after"
    </label>
  </div>
  <div class="form-group" data-ng-repeat="prop in profile">
    <label class="control-label">{{prop.key}}</label>
    <div class="input-group" data-ng-switch="prop.type">
      <span class="input-group-addon" data-ng-if="before">before</span>
      <input data-ng-switch-when="text" class="form-control"
             type="text" data-ng-model="prop.value" />
      <input data-ng-switch-when="number" class="form-control"
             type="number" data-ng-model="prop.value" />
      <span data-ng-switch-when="complex">
        <input class="form-control" type="number" data-ng-model="prop.value"
               style="display:inline-block;width:calc(100% - 90px)" />
        <select class="form-control" data-ng-model="prop.extra"
                style="display:inline-block;width:90px">
          <option value="1">one</option>
          <option value="2">two</option>
        </select>
      </span>
      <span class="input-group-addon" data-ng-if="after">after</span>
    </div>
  </div>
</form>

我正在使用 ngSwitch 根据模型数据为各种属性显示不同的内容。这非常有效。

前两个属性(仅使用一个简单的 input 控件)，与 Bootstrap input-group 很好地集成，并根据需要获得圆 Angular 或平 Angular ，无论是否显示之前/之后的部分。

第三个属性(它在一个包含范围内使用两个控件)没有——它的控件总是有圆 Angular ，即使在显示前/后部分时也是如此，而它们不应该显示。

我知道这是因为 input-group 的 CSS 调整其子项的方式——它将尝试更改 span 的边框而不是内部元素。虽然它可能会对内部控件做一些，因为它们确实在它们连接的中间有非圆 Angular (这很好)。

有没有办法解决这个问题？纠正此问题的最佳方法是什么？ (请注意，在我的真实代码中，span 的内容是由指令生成的，因此我可以考虑基于 JS 的解决方案，尽管纯 CSS 可能更可取。)

---

或者，如果 AngularJS 令人困惑，可以使用一个更简化的示例来显示相同​​的基本问题:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<form>
  <div class="form-group">
    <label class="control-label">Prop</label>
    <div class="input-group">
      <span class="input-group-addon">before</span>
      <span>
        <input class="form-control" type="number" value="42"
               style="display:inline-block;width:calc(100% - 90px)" />
        <select class="form-control"
                style="display:inline-block;width:90px">
          <option value="1" selected>one</option>
          <option value="2">two</option>
        </select>
      </span>
      <span class="input-group-addon">after</span>
    </div>
  </div>
</form>

删除 input/select 周围的 span 标签可以解决问题，但不幸的是，这不是一个有效的解决方案(由于 AngularJS) .

Answer 1

我已经为此困惑了好几天，但在一个“写下问题提供答案”的神秘案例中，我想我终于找到了。

添加以下 CSS 似乎可以解决问题:

.input-group span:not(:first-child) .form-control:first-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group span:not(:last-child) .form-control:last-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

(function (angular) {
  var module = angular.module('test', []);
  
  module.controller('TestCtrl', ['$scope', function ($scope) {
    $scope.before = $scope.after = true;
    $scope.profile = [
      { key: 'Prop1', type: 'text', value: 'test' },
      { key: 'Prop2', type: 'number', value: 42 },
      { key: 'Prop3', type: 'complex', value: 15, extra: 1 },
    ];
  }]);
  
})(angular);
        
angular.element(document).ready(function () {
  angular.bootstrap(document, ['test']);
});

.input-group span:not(:first-child) .form-control:first-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group span:not(:last-child) .form-control:last-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<form data-ng-controller="TestCtrl">
  <div class="form-group">
    <label class="control-label">
      <input type="checkbox" data-ng-model="before" />
      Show "before"
    </label>
  </div>
  <div class="form-group">
    <label class="control-label">
      <input type="checkbox" data-ng-model="after" />
      Show "after"
    </label>
  </div>
  <div class="form-group" data-ng-repeat="prop in profile">
    <label class="control-label">{{prop.key}}</label>
    <div class="input-group" data-ng-switch="prop.type">
      <span class="input-group-addon" data-ng-if="before">before</span>
      <input data-ng-switch-when="text" class="form-control"
             type="text" data-ng-model="prop.value" />
      <input data-ng-switch-when="number" class="form-control"
             type="number" data-ng-model="prop.value" />
      <span data-ng-switch-when="complex">
        <input class="form-control" type="number" data-ng-model="prop.value"
               style="display:inline-block;width:calc(100% - 90px)" />
        <select class="form-control" data-ng-model="prop.extra"
                style="display:inline-block;width:90px">
          <option value="1">one</option>
          <option value="2">two</option>
        </select>
      </span>
      <span class="input-group-addon" data-ng-if="after">after</span>
    </div>
  </div>
</form>

(将此问题留在这里以防其他人遇到类似问题或更好的解决方案。)