Question

嗨，我试图在selectAll/None内添加md-select选项，一旦选中了selectAll复选框，应检查所有其他复选框，如何控制其他复选框是我的问题请任何人都可以帮助我，我非常需要这个。代码已关闭提前谢谢。

<!doctype html>
<html>
    <style>.selectdemoSelectHeader {
  /* Please note: All these selectors are only applied to children of elements with the 'selectdemoSelectHeader' class */ }
  .selectdemoSelectHeader .demo-header-searchbox {
    border: none;
    outline: none;
    height: 100%;
    width: 100%;
    padding: 0; }
  .selectdemoSelectHeader .demo-select-header {
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.14), 0 0 0 0 rgba(0, 0, 0, 0.12);
    padding-left: 10.667px;
    height: 48px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    width: auto; }
  .selectdemoSelectHeader md-content._md {
    max-height: 240px; }</style>

    <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
   </head>

   <body ng-app = "myapp">       
    <div ng-controller="HelloController" class="md-padding" ng-cloak>
      <div>
        <h1 class="md-title">Pick a vegetable below</h1>
        <div layout="row">
          <md-input-container>
            <label>Vegetables</label>
            <md-select ng-model="selectedVegetables"
                       md-on-close="clearSearchTerm()"
                       data-md-container-class="selectdemoSelectHeader"
                       multiple>
              <md-select-header class="demo-select-header">
                <input ng-model="searchTerm"
                       type="search"
                       placeholder="Search for a vegetable.."
                       class="demo-header-searchbox md-text">
              </md-select-header>

              <md-optgroup label="vegetables">
                   <md-checkbox ng-model="selectedAll"ng-click="checkAll()" style="float:left">SelectAll/NONE</md-checkbox>
                <md-option ng-value="vegetable" ng-repeat="vegetable in vegetables |
                  filter:searchTerm">{{vegetable}}</md-option>
              </md-optgroup>
            </md-select>
          </md-input-container>
        </div>
     </div>
    </div>

   <script>        
     angular.module("myapp", ['ngMaterial'])
     .controller("HelloController", function($scope,$element) {
     $scope.vegetables = ['Corn' ,'Onions' ,'Kale' ,'Arugula' ,'Peas', 'Zucchini'];
     $scope.searchTerm;
     $scope.clearSearchTerm = function() {
     $scope.searchTerm = '';
      };

      $element.find('input').on('keydown', function(ev) {
      ev.stopPropagation();
     });

     });
    </script>

   </body>
</html>

如何添加选择全部/无以md选择角度材料？

0 个答案: