Close button in md-select

Navigation
3

I'm using the angular material, and I need a close button when I make the select selection, it just closes the box if I click outside, below has an example:

HTML: 

<div ng-controller="MyCtrl" layout layout-align="center center">
    <md-select ng-model="myModel" placeholder="Escolha" ng-change="onChange()" md-on-open="onOpen()">
        <md-option value="0">Opção A</md-option>
        <md-option value="1">Opção B</md-option>
        <button>fechar (x)</buton>
    </md-select>
</div>

Javascript: 

angular.module('MyApp', ['ngMaterial'])
.controller('MyCtrl', function ($scope) {
    $scope.onChange = function() {
        //alert('on change');
    };

    $scope.onOpen = function() {
        //alert('on open');
    };
})

link

I did that, but it did not work: 

 <md-button ng-click="fechar()">Botão fechar select</md-button>


    $scope.fechar = function () {
      $mdSelect.hide();
    };

ReferenceError: $mdSelect is not defined
    
asked by anonymous 31.10.2016 / 19:43

2 answers

3

Add a ng-click to the button with the following code: 

$mdSelect.hide();

EDIT 1

You should inject the $ mdSelect dependency in the controller statement: 

angular
  .module('MyApp', ['ngMaterial'])
  .controller('MyCtrl', function ($scope, $mdSelect) {
  $scope.fechar = function() {
    $mdSelect.hide();
  }
}
    
31.10.2016 / 19:58
0

You can use ng-click only by denying its condition in the click, and use ng-show , or ng-hide , as you prefer: 

angular
  .module('MyApp', ['ngMaterial'])
  .controller('MyCtrl', function ($scope) {
    $scope.display_box = true;
}

This should only work: 

 <button ng-click="display_box=!display_box;"
         ng-class="{active:display_box=!display_box}">fechar (x)
 </buton>
 <md-select ng-show="display_box" ng-model="myModel...>
   conteúdo que irá ser escondido
 </md-select>
    
01.11.2016 / 17:15
Get JSON value and set AJAX behavior How to return a pure Json (without XML encapsulation) using webservice in C #