Matteo Disetti Matteo Disetti - 3 months ago 84
AngularJS Question

Angular.js autocomplete with $http.get TypeError: Cannot read property 'success' of undefined

With this code i always get TypeError: Cannot read property 'success' of undefined.
I've tried also with .then instead of .success but i get the same error.
After plus than ten hours of googling i'm a little bit desperate...

Html:

<div ng-controller="search_interest" layout="column">
<md-chips ng-model="ctrl.selectedVegetables" md-autocomplete-snap md-require-match>
<md-autocomplete
md-selected-item="selectedItem"
md-search-text="searchText"
md-items="item in getInterest(searchText)"
md-item-text="item.name"
placeholder="Search for a vegetable">
<span md-highlight-text="searchText">{{item.name}} :: {{item.type}}</span>
</md-autocomplete>
<md-chip-template>
<span>
<strong>{{$chip.name}}</strong>
<em>({{$chip.type}})</em>
</span>
</md-chip-template>
</md-chips>
</div>


And the js:

var app = angular.module('autocomplete_app', ['ngMaterial']);

app.controller('search_interest',
function($scope, $http){
$scope.searchText = '';
$scope.selectedItem = undefined;
function getInterest($scope){
$http.get("someurl.php?query=" + $scope.searchText)
.success(function(data){
$scope.interest = data;
console.log('data', JSON.stringify(data));
});
};
});

Answer

The problem wasn't your http call but the calls that the angular materials import done, as you can see in the bellow image that the problem was on the angularjs-materials.js on line 10.

console image

enter image description here

you can look at this version: I've add the plunker in the comment above.

I've changed a bit the header of the HTML page. this is not working because I can't call for the URL you requested but on your solution should work.

Comments