0

我无法使用 angularjs md-autocomplete 指令。请让我知道问题出在哪里。

  TypeError: Cannot read property 'then' of undefined
at de (angular-material.min.js:13)
at he (angular-material.min.js:13)
at e.B [as focus] (angular-material.min.js:13)
at fn (eval at compile (angular.min.js:230), <anonymous>:4:415)
at b (angular.min.js:125)
at e (angular.min.js:272)
at b.$eval (angular.min.js:144)
at b.$apply (angular.min.js:145)
at HTMLInputElement.<anonymous> (angular.min.js:272)

打开 md-autocomplete 时出现此错误

TypeError: Cannot read property 'filter' of undefined
at DeliveryCtrl.querySearch (DeliveryCtrl.js:81)
at fn (eval at compile (angular.min.js:230), <anonymous>:4:416)
at b (angular.min.js:125)
at n.$eval (angular.min.js:144)
at de (angular-material.min.js:13)
at he (angular-material.min.js:13)
at e.B [as focus] (angular-material.min.js:13)
at fn (eval at compile (angular.min.js:230), <anonymous>:4:415)
at b (angular.min.js:125)
at e (angular.min.js:272)

这是我的控制器

 (function() {
'use strict';
RLabs.controller('DeliveryCtrl', DeliveryCtrl);

function DeliveryCtrl($timeout, $q, $log, $http, $scope, resto_info, base_url) {
    $scope.delivery_areas = [];
    $scope.fun1 = function() {
        $scope.fun2().then(function(data) {
            console.log("after call to  fun2"); // execute before fun2
            var myArray = data;
            var myString = JSON.stringify(myArray.join(', '));
            console.log(myString);
            console.log(myArray);
            return myString.split(/, +/g).map(function(state) {
                return {
                    value: state.toLowerCase(),
                    display: state
                };
            });
        });
    }
    $scope.fun2 = function() {
        var deferred = $q.defer();
        $http({
            url: base_url.base_url + 'profile-load',
            method: "POST",
            data: {
                "profile_id": resto_info.profile_id,
                "api_key": resto_info.api_key,
                "app_version": resto_info.app_version,
                "request_operation": "get_delivery_area_data"
            }
        }).success(function(response) {
            console.log(response);
            console.log(response.response.location[0].delivery.areas);
            $scope.delivery_areas = response.response.location[0].delivery.areas;
            console.log($scope.delivery_areas);
            deferred.resolve(response.response.location[0].delivery.areas);
        }).error(function() {
            deferred.resolve(null);
        });
        return deferred.promise;
    }
    var self = this;
    self.simulateQuery = false;
    self.isDisabled = false;
    self.states = $scope.fun1();
    self.querySearch = querySearch;
    self.selectedItemChange = selectedItemChange;
    self.searchTextChange = searchTextChange;
    self.newState = newState;
    function newState(state) {
        alert("Sorry! You'll need to create a Constitution for " + state + " first!");
    }
    function querySearch(query) {
        var results = query ? self.states.filter(createFilterFor(query)) : self.states,
            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));
    }       
    function createFilterFor(query) {
        var lowercaseQuery = angular.lowercase(query);
        return function filterFn(state) {
            return (state.value.indexOf(lowercaseQuery) === 0);
        };
    }
}})();

这是我的html

     <div ng-controller="DeliveryCtrl as ctrl" layout="column" ng-cloak>
<md-content class="md-padding">
    <form ng-submit="$event.preventDefault()">
        <p>Use <code>md-autocomplete</code> to search for matches from local or remote data sources.</p>
        <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.display" md-min-length="0" placeholder="What is your favorite US state?">
            <md-item-template>
                <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
            </md-item-template>
            <md-not-found>
                No states matching "{{ctrl.searchText}}" were found.
                <a ng-click="ctrl.newState(ctrl.searchText)">Create a new one!</a>
            </md-not-found>
        </md-autocomplete>
        <br/>
        <md-checkbox ng-model="ctrl.simulateQuery">Simulate query for results?</md-checkbox>
        <md-checkbox ng-model="ctrl.noCache">Disable caching of queries?</md-checkbox>
        <md-checkbox ng-model="ctrl.isDisabled">Disable the input?</md-checkbox>
        <p>By default, <code>md-autocomplete</code> will cache results when performing a query. After the initial call is performed, it will use the cached results to eliminate unnecessary server requests or lookup logic. This can be disabled above.</p>
    </form>
</md-content>

请提供解决方案如何在自动完成指令选择列表中获取 myString 的值

4

1 回答 1

0

我有同样的问题，这对我有用：

function autoComplete(query) {

    if (!query || query.length < 2) {
        return vm.complete = [];
    }

   // http request

 }
于 2017-03-08T17:48:29.977 回答