md-autocomplete未顯示

Question

我正在嘗試角度材料設計，我無法顯示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（您正在使用）。 另外，在你的帖子中我看不到對angular-material.min.js文件的引用。 您可能會將其包含在其他地方，只需檢查即可。

希望有所幫助

Answer 2

你好嗎？

您可以嘗試替換此行代碼：

md-item-text="display"

為了這：

md-item-text="item.display"

希望這可以幫助..