Автозаполнение углового материала не работает

Я пытаюсь использовать директиву автозаполнения из углового материала. Я пытался реализовать пример из their website Автозаполнение углового материала не работает

Но как только я начинаю печатать я TypeError: Cannot read property 'success' of undefined

Угловой код:

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">

код в 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>

Редактировать : Консольный выход:

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)

Извините, что я не могу предоставить plunkr, но это производственный код.

Любые предложения, в которых я ошибаюсь?

источник

2015-06-08 TietjeDK

Там нет 'success' в любом из вашего кода. Можете ли вы попытаться точно определить ошибку (следует расположить справа от этой строки в консоли) и попытаться показать код, в котором находится «успех». [Jsfiddle] (http://jsfiddle.net) также очень поможет, если вы можете воспроизвести проблему там. – FrankerZ

Я добавил консольный вывод в исходное сообщение. Он указывает на угловые. Я использую 'succes' в том же контроллере, но вне функции автозаполнения. Код находится внутри Sharepoint, поэтому я не могу реально воспроизвести обстоятельства. – TietjeDK

Проверьте, если ваш контроллер определяется с псевдонимом, так же, как исходный образец:

ng-controller="DemoCtrl as ctrl"

в вашем случае

ng-controller="helpListCtrl as ctrl"

источник

2015-06-09 15:09:32

querySearch должен вернуть обещание.

так, что-то вроде

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

источник

2016-02-27 06:18:17 slmyers

Попробуйте этот пример

<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); 
 
        }, 
 
\t \t    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>

источник

2016-08-12 07:41:38 katerinkadar

Автозаполнение углового материала не работает

ответ

Смежные вопросы