Question

我正在使用角度素材autocomplete.i点击自动填充文本框时出现错误。

TypeError: Cannot read property 'then' of undefined
at me (angular-material.min.js:13)
at ve (angular-material.min.js:13)
at e.q [as focus] (angular-material.min.js:13)
at fn (eval at compile (angular.js:15152), <anonymous>:4:295)
at e (angular.js:26673)
at b.$eval (angular.js:17958)
at b.$apply (angular.js:18058)
at HTMLInputElement.<anonymous> (angular.js:26678)
at HTMLInputElement.dispatch (jquery.min.js:3)
at HTMLInputElement.r.handle (jquery.min.js:3)

这是我的控制器。（function（）{ 'use strict';

angular
    .module('app')
    .controller('MenuController', MenuController);

MenuController.$inject = ['$location', '$rootScope', '$scope', '$mdMedia', '$mdDialog'];
function MenuController($location, $rootScope, $scope, $mdMedia, $mdDialog) {

    $scope.headtext = "This is header";


    function initController() {

    }


    var self = this;
    self.simulateQuery = false;
    self.isDisabled    = false;
    self.repos         = loadAll();
    self.querySearch   = querySearch;
    self.selectedItemChange = selectedItemChange;
    self.searchTextChange   = searchTextChange;
    // ******************************
    // Internal methods
    // ******************************
    /**
     * Search for repos... use $timeout to simulate
     * remote dataservice call.
     */
    function querySearch (query) {
        var results = query ? self.repos.filter( createFilterFor(query) ) : self.repos,
            deferred;
        if (self.simulateQuery) {
            deferred = $q.defer();
            $timeout(function () { deferred.resolve( results ); }, Math.random() * 1000, false);
            return deferred.promise;
        } else {
            return results;
        }
    }
    function searchTextChange(text) {
        $log.info('Text changed to ' + text);
    }
    function selectedItemChange(item) {
        $log.info('Item changed to ' + JSON.stringify(item));
    }
    /**
     * Build `components` list of key/value pairs
     */
    function loadAll() {
        var repos = [
          {
              'name'      : 'Angular 1',
              'url'       : 'https://github.com/angular/angular.js',
              'watchers'  : '3,623',
              'forks'     : '16,175',
          },
          {
              'name'      : 'Angular 2',
              'url'       : 'https://github.com/angular/angular',
              'watchers'  : '469',
              'forks'     : '760',
          },
          {
              'name'      : 'Angular Material',
              'url'       : 'https://github.com/angular/material',
              'watchers'  : '727',
              'forks'     : '1,241',
          },
          {
              'name'      : 'Bower Material',
              'url'       : 'https://github.com/angular/bower-material',
              'watchers'  : '42',
              'forks'     : '84',
          },
          {
              'name'      : 'Material Start',
              'url'       : 'https://github.com/angular/material-start',
              'watchers'  : '81',
              'forks'     : '303',
          }
        ];
        return repos.map( function (repo) {
            repo.value = repo.name.toLowerCase();
            return repo;
        });
    }
    /**
     * Create filter function for a query string
     */
    function createFilterFor(query) {
        var lowercaseQuery = angular.lowercase(query);
        return function filterFn(item) {
            return (item.value.indexOf(lowercaseQuery) === 0);
        };
    }
}

})();

这是我的HTML

<md-content layout-padding layout="column">
        <form ng-submit="$event.preventDefault()">

            <md-autocomplete ng-disabled="ctrl.isDisabled"
                             md-no-cache="ctrl.noCache"
                             md-selected-item="ctrl.selectedItem"
                             md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
                             md-search-text="ctrl.searchText"
                             md-selected-item-change="ctrl.selectedItemChange(item)"
                             md-items="item in ctrl.querySearch(ctrl.searchText)"
                             md-item-text="item.name"
                             md-min-length="0"
                             placeholder="Pick an Angular repository"
                             md-menu-class="autocomplete-custom-template">
                <md-item-template>
                    <span class="item-title">
                        <md-icon md-svg-icon="img/icons/octicon-repo.svg"></md-icon>
                        <span> {{item.name}} </span>
                    </span>
                    <span class="item-metadata">
                        <span class="item-metastat">
                            <strong>{{item.watchers}}</strong> watchers
                        </span>
                        <span class="item-metastat">
                            <strong>{{item.forks}}</strong> forks
                        </span>
                    </span>
                </md-item-template>
            </md-autocomplete>
        </form>
    </md-content>

我无法追踪此错误请帮助。

Answer 1

您未实例化所选项目。

self.selectedItem = [];

使用角度材料时出错md-autocomplete

1 个答案: