2015-09-28 62 views
1

我有md选择,我想隐藏在一个按钮上点击如何做到这一点,请引导我进入这个。如何在按钮上单击隐藏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'); 
+0

与试图解决这个问题 – Tushar

+0

@Tushar添加的代码 –

+0

添加HTML代码也添加您的代码.. – Tushar

回答

1

附加NG-如果MD-选择标签作为以下...

<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; 
    } 
相关问题