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>

这将呈现：

根据我的用户故事，有时我不需要右边的那个按钮。如果我依附于课程＆＃34;输入-group-addon＆＃34;一个角度表达式，如 ng-show =＆＃39; showButtonOnTheRight＆＃39; ，并将其设置为false，效果是该按钮将消失，输入行仍将被截断在同一位置，它的角落不会圆。

我想实现这样的效果：当我设置 showButtonOnTheRight = false 时，输入更改以使该字段看起来像常规的bootrap输入，即占据全宽并具有圆角。我不想使用替代的不同输入，因为我将验证标志附加到给定输入的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标志

Here is my plunker link

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

3 个答案: