javascript - 如何通过脚本单击 md-autocomplete 按钮“cross”？

Question

我有md-autocomplete指令并尝试搜索并在选择项目时单击按钮清除（交叉）。我做错了什么？

var buttons = document.querySelector('md-autocomplete button');
buttons.onclick();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<md-autocomplete class="city"
                     ng-disabled="isDisabled"
                     md-no-cache="false"
                     md-selected-item="selectedItem"
                     md-search-text-change="searchTextChange(searchText)" md-search-text="searchText"
                     md-selected-item-change="selectedItemChange(item)" md-items="item in querySearch(searchText)"
                     md-item-text="item.display" md-min-length="1" placeholder="{{point.place}}">
      <md-item-template>
        <span md-highlight-text="searchText" md-highlight-flags="^i">{{item.display}}</span>
      </md-item-template>
      <md-not-found>
        No matches found.
      </md-not-found>
    </md-autocomplete>

Answer 1

如果我理解正确，只需替换onclick()为click().

（这是不同的演示，但逻辑是相同的）

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

app.controller('ctrl', ['$scope', '$filter', function($scope, $filter) {
  var allGroups = [
    'one',
    'two',
    'three'
  ];

  $scope.queryGroups = function(search) {
    var firstPass = $filter('filter')(allGroups, search);

    return firstPass.filter(function(item) {
      return $scope.selectedGroups.indexOf(item) === -1;
    });
  };

  $scope.addGroup = function(group) {
    $scope.selectedGroups.push(group);
  };

  $scope.allGroups = allGroups;
  $scope.selectedGroups = [allGroups[0]];

  $scope.$watchCollection('selectedGroups', function() {
    $scope.availableGroups = $scope.queryGroups('');
  });
}]);

<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.1/angular-material.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.1/angular-material.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.4.4/angular-aria.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.4.4/angular-animate.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <h2>Groups</h2>

  <md-autocomplete
                   md-search-text="searchText"
                   md-items="item in queryGroups(searchText)"
                   md-item-text="item"
                   md-autoselect="true"
                   md-select-on-match="true"
                   md-no-cache="true"
                   md-require-match="true"
                   placeholder="Find a group..">
    <span md-highlight-text="searchText">{{item}}</span>
  </md-autocomplete>

  <div ng-show="availableGroups.length > 0">
    <h4>Available Groups</h4>
    <md-button ng-repeat="(index, group) in availableGroups" class="md-raised" ng-click="addGroup(group)">{{group}}</md-button>
  </div>
</div>
<button onclick="document.querySelector('md-autocomplete button').click()">Clear</button>

http://jsbin.com/yawowan/edit?html,js