3

角度のあるマテリアル デザインを試していますが、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>

私のプロジェクトでは、ブートストラップと jquery も使用しています。

ありがとう。

4

2 に答える 2

0

元気ですか？

このコード行を置き換えることができます:

md-item-text="display"

このため：

md-item-text="item.display"

お役に立てれば..

于 2015-03-17T03:26:14.933 に答える