使用$ http.get的Angular.js自动完成TypeError:无法读取undefined的属性“success”

时间:2015-07-22 14:49:40

标签: angularjs http-get md-autocomplete

使用此代码我总是得到 TypeError:无法读取未定义的属性“成功”。 我也试过.then而不是.success但我得到了同样的错误。 经过超过十个小时的谷歌搜索,我有点绝望......

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>

和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));
                });
        };
    });

3 个答案:

答案 0 :(得分:2)

问题不在于http调用,而是角度材料导入的调用,如下图所示,问题出在第10行的angularjs-materials.js上。

控制台图片

enter image description here

你可以看看这个版本:我在上面的评论中添加了plunker。

我已经改变了HTML页面的标题。 这不起作用,因为我无法调用您请求的网址,但您的解决方案应该有效。

答案 1 :(得分:1)

新答案

在查询搜索功能中我有

function querySearch(searchText) {
            if (!searchText || searchText.length < 3) {
                return;
            }

我本应该返回一个空数组。 return [];

致信 berkyl github上回答了我的问题。

旧答案

在bower "angular-material": "^1.0.7""angular-material": "^1.0.5"中,我收到了类似的错误:

  

angular.js:13550 TypeError:无法读取未定义的属性'then'

但是当我使用cdn version 1.0.5时它工作正常。

答案 2 :(得分:0)

只需使用基本自动填充功能

https://material.angularjs.org/latest/api/directive/mdAutocomplete

然后

指令自行定制。

<强> HTML

<md-autocomplete md-selected-item="selectedItem" md-search-text="searchText" md-items="item in querySearch(searchText)" md-item-text="item.display">
   <md-item-template>
      <span md-highlight-text="searchText">{{item.display}}</span>
   </md-item-template>
   <md-not-found>No matches found.</md-not-found>
</md-autocomplete> 

工作正常。