bootstrap和input-groups：如何使输入变宽，wnen input-group-addon隐藏？

Question

我有一个类似于原始Bootstrap示例的代码：

<div class="input-group">
  <input type="text" class="form-control" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

这将导致：

根据我的用户故事，有时我不需要右侧的按钮。 如果我使用“ input-group-addon”类将span附加到ng-show ='showButtonOnTheRight'之类的角度表达式，并将其设置为false，则效果是该按钮将消失，并且输入行仍将被截断位置，并且其角不会圆。

我想实现这种效果，当我设置showButtonOnTheRight = false时 ，输入会发生变化，以使该字段看起来像常规的bootsrap输入，即采用全角并具有圆角。 我不想使用替代输入，因为我将验证标志附加到给定输入的ID，因此非常需要保留。

Answer 1

一种更简洁的方法（并且仅保持在角度范围内）是仅根据显示切换输入类：

<div ng-class="{ 'input-group': show }">

这是它的jsFiddle： http : //jsfiddle.net/Lb7p538k/

Answer 2

您可以通过为.input-group添加以下CSS来实现此目的

.input-group{
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
}

的jsfiddle

Answer 3

我使用ng-if和@Aakash提到的CSS根据showButtonOnTheRight标志显示文本框

这是我的朋克链接