如何在单击按钮时隐藏 md-select？

Question

我有 md-select，我想将它隐藏在一个按钮上，点击如何完成请指导我。

我使用过此代码但无法正常工作

html代码

<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 我正在使用的代码

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

Answer 1

在 md-select 标签中添加 ng-if 如下...

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

控制器初始化时初始化。

  $scope.showthis = true;

并创建一个函数并在单击按钮时调用它...

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

如何在单击按钮时隐藏 md-select？

How to hide md-select on the button click?

css

angularjs

angular-material