角材料自动完成不起作用

Question

I'm trying to use the autocomplete directive from angular material. 我正在尝试使用角度材料的自动完成指令。 I have tried to implement the example from their website 我试图从他们的网站上实施该示例

But as soon as I start typing I get TypeError: Cannot read property 'success' of undefined 但是，一旦我开始键入，我就会得到TypeError: Cannot read property 'success' of undefined

Angular code: 角度代码：

var spApp = angular.module('helpApp', ['ui.bootstrap', 'angular-edit-row', 'ui-notification', 'uiSwitch', 'ngMaterial'])

 spApp.controller('helpListCtrl', function($scope, $http, $modal, Notification) {
  function DemoCtrl ($timeout, $q) {
var self = this;

// list of `state` value/display objects
self.states        = loadAll();
self.selectedItem  = null;
self.searchText    = null;
self.querySearch   = querySearch;

// ******************************
// Internal methods
// ******************************

/**
 * Search for states... use $timeout to simulate
 * remote dataservice call.
 */
function querySearch (query) {
  var results = query ? self.states.filter( createFilterFor(query) ) : [];
  return results;
}

/**
 * Build `states` list of key/value pairs
 */
function loadAll() {
  var allStates = 'North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,Wisconsin, Wyoming';

  return allStates.split(/, +/g).map( function (state) {
    return {
      value: state.toLowerCase(),
      display: state
    };
  });
}

/**
 * Create filter function for a query string
 */
function createFilterFor(query) {
  var lowercaseQuery = angular.lowercase(query);

  return function filterFn(state) {
    return (state.value.indexOf(lowercaseQuery) === 0);
  };

}
}

<md-autocomplete flex="" required="" md-input-name="autocompleteField" md-no-cache="ctrl.noCache" md-selected-item="ctrl.selectedItem" md-search-text="ctrl.searchText" md-items="item in ctrl.querySearch(ctrl.searchText)" md-item-text="item.display" md-floating-label="Favorite state">

Code inside HTML: HTML中的代码：

<md-item-template>
            <span md-highlight-text="ctrl.searchText">{{item.display}}</span>
          </md-item-template>
          <div ng-messages="searchForm.autocompleteField.$error" ng-if="searchForm.autocompleteField.$touched">
            <div ng-message="required">You <b>must</b> have a favorite state.</div>
            <div ng-message="minlength">Your entry is not long enough.</div>
            <div ng-message="maxlength">Your entry is too long.</div>
          </div>
</md-autocomplete>

Edit: Console output: 编辑：控制台输出：

TypeError: Cannot read property 'success' of undefined
at L (angular-material.min.js:10)
at F (angular-material.min.js:10)
at Object.C [as fn] (angular-material.min.js:10)
at n.$get.n.$digest (angular.js:14308)
at n.$get.n.$apply (angular.js:14571)
at eg.$$debounceViewValueCommit (angular.js:23391)
at eg.$setViewValue (angular.js:23363)
at HTMLInputElement.l (angular.js:19784)
at HTMLInputElement.b.event.dispatch (jquery-1.9.1.js:973)
at HTMLInputElement.b.event.add.v.handle (jquery-1.9.1.js:913)

I'm sorry I cant provide a plunkr but this is production code. 抱歉，我无法提供plunkr，但这是生产代码。

Any suggestions to where I'm going wrong? 有什么建议可以解决我的问题吗？

Answer 1

Check if your controller is defined with an alias, just like the original sample: 检查您的控制器是否使用别名定义，就像原始示例一样：

ng-controller="DemoCtrl as ctrl"

in your case 在你的情况下

ng-controller="helpListCtrl as ctrl"

Answer 2

querySearch should return a promise. querySearch应该返回一个承诺。

so, something like 所以，像

function querySearch(query){
  var d = $q.defer();
  var results = query ? self.states.filter( createFilterFor(query) ) : [];
  d.resolve(results)
  return d.promise;
}

Answer 3

Try this example 试试这个例子

 <html lang="en"> <head> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script> <script language="javascript"> angular .module('firstApplication', ['ngMaterial']) .controller('autoCompleteController', autoCompleteController); function autoCompleteController ($timeout, $q, $log) { var self = this; self.simulateQuery = false; self.isDisabled = false; // list of states to be displayed self.states = loadStates(); self.querySearch = querySearch; self.selectedItemChange = selectedItemChange; self.searchTextChange = searchTextChange; self.newState = newState; function newState(state) { alert("This functionality is yet to be implemented!"); } 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)); } //build list of states as map of key-value pairs function loadStates() { var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\\ Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\\ Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\\ Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\\ North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\\ South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\\ Wisconsin, Wyoming'; return allStates.split(/, +/g).map( function (state) { return { value: state.toLowerCase(), display: state }; }); } //filter function for search query function createFilterFor(query) { var lowercaseQuery = angular.lowercase(query); return function filterFn(state) { return (state.value.indexOf(lowercaseQuery) === 0); }; } } </script> </head> <body ng-app="firstApplication" ng-cloak> <div ng-controller="autoCompleteController as ctrl" layout="column" ng-cloak> <md-content class="md-padding"> <form ng-submit="$event.preventDefault()"> <p><code>md-autocomplete</code> can be used to provide search results 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="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">Show progress for results?</md-checkbox> <md-checkbox ng-model="ctrl.noCache">Disable caching?</md-checkbox> <md-checkbox ng-model="ctrl.isDisabled">Disable?</md-checkbox> <p><code>md-autocomplete</code> caches results when performing a query. After first call, it uses the cached results to eliminate unnecessary server requests or lookup logic and it can be disabled.</p> </form> </md-content> </div> </body> </html>

角材料自动完成不起作用

问题描述

3 个解决方案

解决方案1
0 2015-06-09 15:09:32

解决方案2
0 2016-02-27 06:18:17

解决方案3
0 2016-08-12 07:41:38

角材料自动完成不起作用

问题描述

3 个解决方案

解决方案1 0 2015-06-09 15:09:32

解决方案2 0 2016-02-27 06:18:17

解决方案3 0 2016-08-12 07:41:38

解决方案1
0 2015-06-09 15:09:32

解决方案2
0 2016-02-27 06:18:17

解决方案3
0 2016-08-12 07:41:38