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？

1 个答案: