CODEWITHSUNDEEP
cssangularjsangular-material
Sparsh Pipley
Sparsh Pipley

Reputation: 451

How to hide md-select on the button click?

I'm having the md-select and I want to hide it on a button click how this can be done please guide me into this.

I've used this code but not working properly

html code

<div layout="column" layout-align="start center" class="header">
  <div layout="column" layout-gt-md="row" layout-align="center end" layout-padding class="layout-max-width">
    <div flex class="input-container">
      <md-input-container flex>
        <label>City</label>
        <md-select ng-model="filter.city">
          <md-option ng-repeat="city in filter.availableCities" value={{city}}>{{city}}</md-option>
        </md-select>
      </md-input-container>
    </div>

    <div flex class="input-container">
      <md-input-container flex>
        <label>Search job options</label>
        <md-select multiple ng-model="filter.language" >

          <md-option  value="Show also expired jobs" ng-click="toogleExpireFilter()">
            Show also expired jobs
            <md-checkbox style="display: inline;margin-left: 4em;" ng-checked="expiredJob" aria-label="Expired Job Filter">
            </md-checkbox>
          </md-option>

          <md-option ng-click="toogleSwedishFilter()" value="Swedish language not required">
            Swedish language not required
            <md-checkbox style="display: inline;" ng-checked="swedishCheck" aria-label="Swedish Language Filter">
            </md-checkbox>
          </md-option>
        </md-select>
      </md-input-container>
    </div>       
  </div>
</div>

jquery code i'm using

 $(".md-select-menu-container").removeClass('md-active');

Upvotes: 1

Views: 3355

Answers (1)

Kandarp
Kandarp

Reputation: 392

add ng-if in md-select tag as below...

<div layout="column" layout-align="start center" class="header">
  <div layout="column" layout-gt-md="row" layout-align="center end" layout-padding class="layout-max-width">
    <div flex class="input-container">
      <md-input-container flex>
        <label>City</label>
        <md-select ng-if="showthis" ng-model="filter.city">
          <md-option ng-repeat="city in filter.availableCities" value={{city}}>{{city}}</md-option>
        </md-select>
      </md-input-container>
    </div>

    <div flex class="input-container">
      <md-input-container flex>
        <label>Search job options</label>
        <md-select ng-if="showthis" multiple ng-model="filter.language" >

          <md-option  value="Show also expired jobs" ng-click="toogleExpireFilter()">
            Show also expired jobs
            <md-checkbox style="display: inline;margin-left: 4em;" ng-checked="expiredJob" aria-label="Expired Job Filter">
            </md-checkbox>
          </md-option>

          <md-option ng-click="toogleSwedishFilter()" value="Swedish language not required">
            Swedish language not required
            <md-checkbox style="display: inline;" ng-checked="swedishCheck" aria-label="Swedish Language Filter">
            </md-checkbox>
          </md-option>
        </md-select>
      </md-input-container>
    </div>       
  </div>
</div>

initialize when controller initialized.

  $scope.showthis = true;

and create a function and call it on button click...

 $scope.btnClick = function(){
        $scope.showthis = false;
    }

Upvotes: 2

Related Questions