bootstrap and input-groups: how to make input wider wnen input-group-addon is hidden?

Question

I have a code similar to original Bootstrap example:

<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>

That will render this:

According to my user story, sometimes I do not need that button on the right. If I attach to span with class "input-group-addon" an angular expression such as ng-show='showButtonOnTheRight' , and set that to false, the effect is that button will disappear, and input line will be still truncated at same position, and its corners will be not round.

I would like to achieve that effect that when I set showButtonOnTheRight=false , input changes so that the field looks like a regular bootsrap input, that is, takes full width and has round corners. I do not want to use substitute different input, because I attach validation flags to given input's ID, so it is very much desirable to keep.

Answer 1

A much cleaner way (and staying within angular only) is to simply also toggle the input class based on the show:

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

Here's the jsFiddle for it: http://jsfiddle.net/Lb7p538k/

Answer 2

You can achieve this by adding the following css for .input-group

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

JSFiddle

Answer 3

I used ng-if and @Aakash mentioned CSS to show text box depending upon the showButtonOnTheRight flag

Here is my plunker link