【问题标题】:Angular.js autocomplete with $http.get TypeError: Cannot read property 'success' of undefinedAngular.js 使用 $http.get TypeError 自动完成:无法读取未定义的属性“成功”
【发布时间】:2015-07-22 14:49:40
【问题描述】:

使用此代码,我总是得到 TypeError: Cannot read property 'success' of undefined。 我也尝试过使用 .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));
                });
        };
    });

【问题讨论】:

  • 我认为代码已经正确。你能把你的代码放在 Plunkr 上吗?
  • 这里plnkr.co/edit/aWtsG67zTgflF7JUcjSa。我使用了真正的 http 查询 url(正确的查询可以是“mon”)
  • 首先你的 plunker 有一个问题,关于 javascript 文件导入不是 script.js 是 app.js
  • 对不起...你说得对。现在是 app.js。但它还没有工作。如果我打电话给disetti.it/inc/users/search_interest.php?query=mon 我会得到结果...
  • plnkr.co/edit/MAXFMEfVGpI0DEBCcVzy 这是我不知道为什么我不能将其添加到我的回复中的 plunker。请一些编辑将其添加到答案中

标签: angularjs http-get md-autocomplete


【解决方案1】:

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

控制台图片

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

我对 HTML 页面的标题进行了一些更改。 这不起作用,因为我无法调用您请求的 URL,但您的解决方案应该可以工作。

【讨论】:

  • 非常感谢!所以问题只是 angularjs-material.js 版本?现在它正在工作!
  • 我没有得到这个答案。有人可以进行编辑并使其易于理解吗?
【解决方案2】:

新答案

在我拥有的查询搜索功能中

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

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

感谢 berkylgithub 上回答了我的问题。

旧答案

在凉亭"angular-material": "^1.0.7""angular-material": "^1.0.5" 我收到类似的错误:

angular.js:13550 TypeError: Cannot read property 'then' of undefined

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

【讨论】:

    【解决方案3】:

    只需使用基本的自动完成功能

    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> 
    

    工作正常。

    【讨论】:

      猜你喜欢
      • 2020-10-04
      • 1970-01-01
      • 2018-02-01
      • 2015-10-21
      • 1970-01-01
      • 2016-09-20
      • 2018-06-02
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多