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標志顯示文本框

這是我的朋克鏈接