md-autocomplete 未显示

Question

我正在尝试 angular material 设计，但我无法显示 md-autocomplete。

我已经包含在我现有的项目中：

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.7.0/angular-material.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.js"></script>

    <!-- Angular Material Dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.js"></script>

    var storeApp = angular.module(
        'AngularStore', ['ui.router', 'ngMaterial',...])
    .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state('auth.autocomplete', {
                url: '/autocomplete',
                templateUrl: 'resources/partials/autocomplete.html',
                controller: autocompleteCtrl,

            });
}]);

和autocomplete.html：

<div layout="column">

        <md-content class="md-padding" layout="column" style="min-height: 200px; padding-top: 50px;">

            <md-autocomplete md-selected-item="selectedItem" md-search-text="searchText" md-items="item in getMatches(searchText)" md-item-text="display" placeholder="Search...">
                <span md-highlight-text="searchText">{{item.display}}</span>
            </md-autocomplete>
        </md-content>
    </div>

我的控制器是空的：

function autocompleteCtrl($scope){

}

生成的html为：

<md-content class="md-padding md-default-theme" layout="column" style="min-height: 200px; padding-top: 50px;">

        <md-autocomplete md-selected-item="selectedItem" md-search-text="searchText" md-items="item in getMatches(searchText)" md-item-text="display" placeholder="Search...">
            <span md-highlight-text="searchText" class="ng-binding"></span>
        </md-autocomplete>
    </md-content>

在演示页面上：

<md-autocomplete md-selected-item="selectedItem" md-search-text="searchText" md-items="item in getMatches(searchText)" md-item-text="display" placeholder="Search..." class="ng-isolate-scope">        <md-autocomplete-wrap role="listbox">          <input type="text" ng-disabled="isDisabled" ng-model="searchText" ng-keydown="$mdAutocompleteCtrl.keydown($event)" ng-blur="$mdAutocompleteCtrl.blur()" placeholder="Search..." aria-label="Search..." aria-autocomplete="list" aria-haspopup="true" aria-activedescendant="" aria-expanded="false" class="ng-valid ng-dirty ng-valid-parse ng-touched" aria-owns="ul_001" tabindex="0" aria-invalid="false">          <!-- ngIf: searchText -->          <!-- ngIf: $mdAutocompleteCtrl.loading -->        </md-autocomplete-wrap>        <ul role="presentation" id="ul_001">          <!-- ngRepeat: (index, item) in $mdAutocompleteCtrl.matches -->        </ul>        <aria-status class="visually-hidden" role="status" aria-live="assertive">          <!-- ngRepeat: message in $mdAutocompleteCtrl.messages -->        </aria-status></md-autocomplete>

在我的项目中，我还使用了 bootstrap 和 jquery。

谢谢。

Answer 1

检查您使用的 angular_material 版本。我认为自动完成仅适用于 >0.8，而不是 0.7.0（您正在使用）。此外，在您的 post 中，我看不到对 angular-material.min.js 文件的引用。您可能将它包括在其他地方，只是检查一下。

希望对您有所帮助

Answer 2

你好吗？

您可以尝试替换这行代码：

md-item-text="display"

为此：

md-item-text="item.display"

希望这对您有所帮助..

md-autocomplete 未显示

md-autocomplete not displayed

javascript

angularjs

material-design

angular-material