Держите md-select открытым, пока не нажмете снаружи - AngularJS - PullRequest
Новая
       17

Держите md-select открытым, пока не нажмете снаружи - AngularJS

0 голосов
/ 17 сентября 2018

Я использую md-select рендеринг md-checkbox с опцией selectAll.

Если я выберу все, все флажки будут установлены, и раскрывающийся список закроется, что ожидается.

Как мне вызвать закрытие выпадающего меню, если выбрано любое значение, кроме «Все», и закрыть его при внешнем щелчке? 

var app = angular.module('BlankApp', ['ngMaterial', 'ngMessages']);

app.controller('mdSelectController', function($scope, $mdPanel, $mdSidenav, $mdDialog) {

  $scope.helpers = [{
      name: 'All',
      selected: false
    },
    {
      name: 'Ron',
      selected: false
    },
    {
      name: 'Jim',
      selected: false
    },
    {
      name: 'John',
      selected: false
    },
    {
      name: 'Paul',
      selected: false
    },
    {
      name: 'Jeremie',
      selected: false
    }
  ];

  $scope.changeCheckbox = function(rating) {
  console.log(rating)
    if (rating.name === 'All' && rating.selected === true) {
      _.forEach($scope.helpers, function(item) {
        item.selected = true;
      });
    }
    if (rating.name === 'All' && rating.selected === false) {
      _.forEach($scope.helpers, function(item) {
        item.selected = false;
      });
    }
    if (rating.name !== 'All') {
      console.log("Not all");
      _.forEach($scope.helpers, function(item) {
        if (item.name === 'All') {
          item.selected = false;
        }
      });
    }
  };

});
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Angular Material style sheet -->
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.css">
</head>

<body ng-app="BlankApp" ng-controller="mdSelectController" ng-cloak>
  <!--
    Your HTML content here
  -->

  <!-- Angular Material requires Angular.js Libraries -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-messages.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

  <!-- Angular Material Library -->
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js">
  </script>
  <md-input-container>
    <label>Rating</label>
    <md-select id="ratingDropdown" ng-model="automationRatingObj" md-container-class="ratingDropdown" required="required">
      <md-option ng-value="rating" ng-repeat="rating in helpers track by $index">
        <md-checkbox ng-model="rating.selected" aria-label="Select a Rating" ng-change="changeCheckbox(rating)"></md-checkbox>{{rating.name}}
      </md-option>
    </md-select>
  </md-input-container>

</body>

</html>

Пожалуйста, совет. Я проверил API md-select, но у них нет кода, чтобы раскрыть раскрывающийся список. Кроме того, как отключить щелчок по тексту внутри md-select и включить флажок только по клику?

Ответы [ 2 ]

0 голосов
/ 17 сентября 2018

Вы хотите, чтобы раскрывающийся список закрывался при нажатии на все, но оставался открытым при нажатии на любой другой элемент.Вы можете проверить, какое значение вы используете, в ng-repeat и добавить $ event.stopPropagation ();на все объекты без «Все».Вы можете сделать это с помощью тернарного оператора, щелкнув правой кнопкой мыши md-option: ng-click = "rating.name! = 'All'? $ Event.stopPropagation (): ''" 

var app = angular.module('BlankApp', ['ngMaterial', 'ngMessages']);

app.controller('mdSelectController', function($scope, $mdPanel, $mdSidenav, $mdDialog) {

  $scope.helpers = [{
      name: 'All',
      selected: false
    },
    {
      name: 'Ron',
      selected: false
    },
    {
      name: 'Jim',
      selected: false
    },
    {
      name: 'John',
      selected: false
    },
    {
      name: 'Paul',
      selected: false
    },
    {
      name: 'Jeremie',
      selected: false
    }
  ];

  $scope.changeCheckbox = function(rating) {
  console.log(rating)
    if (rating.name === 'All' && rating.selected === true) {
      _.forEach($scope.helpers, function(item) {
        item.selected = true;
      });
    }
    if (rating.name === 'All' && rating.selected === false) {
      _.forEach($scope.helpers, function(item) {
        item.selected = false;
      });
    }
    if (rating.name !== 'All') {
      console.log("Not all");
      _.forEach($scope.helpers, function(item) {
        if (item.name === 'All') {
          item.selected = false;
        }
      });
    }
  };

});
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Angular Material style sheet -->
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.css">
</head>

<body ng-app="BlankApp" ng-controller="mdSelectController" ng-cloak>
  <!--
    Your HTML content here
  -->

  <!-- Angular Material requires Angular.js Libraries -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-messages.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

  <!-- Angular Material Library -->
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js">
  </script>
  <md-input-container>
    <label>Rating</label>
    <md-select id="ratingDropdown" ng-model="automationRatingObj" md-container-class="ratingDropdown" required="required">
      <md-option ng-value="rating" ng-repeat="rating in helpers track by $index" ng-click="rating.name != 'All' ? $event.stopPropagation(): ''" >
        <md-checkbox ng-model="rating.selected" aria-label="Select a Rating" ng-change="changeCheckbox(rating)"></md-checkbox>{{rating.name}}
      </md-option>
    </md-select>
  </md-input-container>

</body>

</html>
0 голосов
/ 17 сентября 2018

Вы можете использовать multiple из md-select вместо md-checkbox. Но вам нужно обновить changeCheckbox функцию - для выбора ALL.

Примерно так: 

<md-select id="ratingDropdown" ng-model="automationRatingObj" md-container-class="ratingDropdown" required="required" multiple="true" ng-change="changeCheckbox()">
      <md-option ng-value="rating" ng-repeat="rating in helpers track by $index" >
        {{rating.name}}
      </md-option>
    </md-select>
...