Condition for angular select option in angular js?

Question

In my angular project, I have a select element with an option. for option, I used ng-repeat for looping purposes. so in the option, I have four different options. and I have four different boxes. if I select any option based on that those boxes will hide and show. how to do this? anyone please help me to fix this.

This is my HTML code:

<select select2 id="environment" name="environment"
              ng-model='filter.environment' data-live-search="true"
        <option ng-repeat="(key,value) in authorizationtype" value="{{key}}"
                ng-bind="value"></option>
      </select>

HTML box codes:

<div class="boxone"></div>
<div class="boxtwo"></div>
<div class="boxthree"></div>
<div class="boxfour"></div>

This is my js code:

AUTHORIZATION_TYPES = {
  1 : "None",
  2 : "Basic",
  3 : "Bearer",
};

Answer 1

You can use ng-if which can render elements selectively.

The variable filter.environment will be changed as the user select options. It will hold the key of your object. So, in the markup:

<div ng-if="filter.environment === 1" class="boxone"></div>

Answer 2

You can use any of the ng-show/ng-hide or ng-if directives, to achieve that.

<div class="boxone"></div>
<div ng-show="filter.environment == 1" class="boxtwo"></div>
<div ng-show="filter.environment == 2" class="boxthree"></div>
<div ng-show="filter.environment == 3" class="boxfour"></div>

ng-if removes html element whereas ng-show/ng-hide just hides them, you will have to choose one according to your needs.