如何通过脚本点击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