带有 $http 调用的 Angular Material 自动完成 [英] Angular Material autocomplete with $http call

查看：18 发布时间：2021/11/10 1:42:33 javascript angularjs autocomplete angular-material

本文介绍了带有 $http 调用的 Angular Material 自动完成的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想做的是一个 Angular Material 自动完成(

控制器

$scope.customersSelect = {};$scope.selectedItem = null;$scope.searchText = null;$scope.getCustomers = 函数(查询){selectsService.getCustomers(query).then(function (results) {$scope.customersSelect = results.data;console.log($scope.customersSelect);}, 函数(错误){警报(错误.数据.消息)；});}

服务

var selectsServiceFactory = {};_getCustomers = 函数(查询){返回 $http.get(serviceBase + 'api/selects/customers/' + 查询).then(功能(结果){返回结果；});}selectsServiceFactory.getCustomers = _getCustomers;返回选择服务工厂；

查看

<md-autocomplete md-floating-label="Klient"自动完成=关闭"弹性="md-search-text-change="getCustomers(searchText)"md-item-text="item"md-items="客户选择中的项目"md-search-text="searchText"md-selected-item="machine.customerId"md-input-maxlength="100"md-input-minlength="2"md-input-name="machineOwner"><md-item-模板><span md-highlight-text="searchText">{{item}}</span></md-item-template>

我成功地从 API 获取数据，因为我可以看到它打印在控制台中.

解决方案

(function() {'使用严格';有角的.module('MyApp').controller('DemoCtrl', DemoCtrl);功能演示Ctrl($http){var self = this;self.data = null;self.selectedItem = null;self.searchText = null;self.querySearch = 函数(查询){$http.get('http://www.omdbapi.com/?s='+escape(query)).then(函数(结果){self.data = result.data.Search;返回 result.data.Search;});}}})();

<html><头><meta charset="UTF-8"><title>$http md-Autocomplete</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"><link rel='样式表预取' href='https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.0-rc4/angular-material.css'><身体><div class="autocompletedemoFloatingLabel" ng-controller="DemoCtrl as ctrl" ng-app="MyApp" layout="column" ng-cloak=""><md-content class="md-padding"><form name="searchForm" ng-submit="$event.preventDefault()"><div layout-gt-sm="row"><md-input-container flex=""><label>名称</label><输入类型=文本"></md-input-container><md-autocomplete md-floating-label="最喜欢的电影"弹性="md-item-text="item.Title"md-items="ctrl.data 中的项目"md-search-text-change="ctrl.querySearch(ctrl.searchText)"md-search-text="ctrl.searchText"md-selected-item="ctrl.selectedItem"md-no-cache="ctrl.noCache"md-input-maxlength="30"md-input-minlength="2"md-input-name="autocompleteField"必需=""><md-item-模板><span md-highlight-text="ctrl.searchText">{{item.Title}}</span></md-item-template><div ng-messages="searchForm.autocompleteField.$error" ng-if="searchForm.autocompleteField.$touched"><div ng-message="required">您<b>必须</b>有一部最喜欢的电影.</div><div ng-message="minlength">您输入的内容不够长.</div><div ng-message="maxlength">您的条目太长.</div>

</md-自动完成>

</表单></md-content>

我终于做到了.这是解决方案.

What i'm trying to do is an Angular Material autocomplete (md-autocomplete) with data dynamically retrieved from an AJAX call to my REST API. Unfortunately I get only indeterminate progress bar instead of autocomplete items as you can see below.

Result

Controller

$scope.customersSelect = {};
$scope.selectedItem = null;
$scope.searchText = null;

$scope.getCustomers = function (query) {
    selectsService.getCustomers(query).then(function (results) {
        $scope.customersSelect = results.data;
        console.log($scope.customersSelect);
    }, function(error) {
        alert(error.data.message);
    });
}

Service

var selectsServiceFactory = {};

_getCustomers = function (query) {
    return $http.get(serviceBase + 'api/selects/customers/' + query)
    .then(function(results) {
        return results;
    });
}

selectsServiceFactory.getCustomers = _getCustomers;

return selectsServiceFactory;

View

<md-autocomplete md-floating-label="Klient" 
            autocomplete="off" 
            flex="" 
            md-search-text-change="getCustomers(searchText)" 
            md-item-text="item" 
            md-items="item in customersSelect" 
            md-search-text="searchText" 
            md-selected-item="machine.customerId" 
            md-input-maxlength="100" 
            md-input-minlength="2" 
            md-input-name="machineOwner">
<md-item-template>
    <span md-highlight-text="searchText">{{item}}</span>
</md-item-template>

I'm getting the data successfully from the API, because I can see it printed in the console.

解决方案

(function() {
  'use strict';
  angular
    .module('MyApp')
    .controller('DemoCtrl', DemoCtrl);

  function DemoCtrl($http) {
    var self = this;
    
    self.data = null;
    self.selectedItem = null;
    self.searchText = null;
    
    self.querySearch = function (query) {
      $http.get('http://www.omdbapi.com/?s=' + escape(query))
        .then(function(result) {
          self.data = result.data.Search;
          return result.data.Search;
        });
    }
  }
})();

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>$http md-Autocomplete</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
    
    
    <link rel='stylesheet prefetch' href='https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.0-rc4/angular-material.css'>
  </head>

  <body>

    <div class="autocompletedemoFloatingLabel" ng-controller="DemoCtrl as ctrl" ng-app="MyApp" layout="column" ng-cloak="">
      <md-content class="md-padding">
        <form name="searchForm" ng-submit="$event.preventDefault()">
            <div layout-gt-sm="row">
            <md-input-container flex="">
              <label>Name</label>
              <input type="text">
            </md-input-container>
            <md-autocomplete md-floating-label="Favorite movie" 
                            flex="" 
                            md-item-text="item.Title"
                            md-items="item in ctrl.data" 
                            md-search-text-change="ctrl.querySearch(ctrl.searchText)"
                            md-search-text="ctrl.searchText" 
                            md-selected-item="ctrl.selectedItem" 
                            md-no-cache="ctrl.noCache" 
                            md-input-maxlength="30" 
                            md-input-minlength="2" 
                            md-input-name="autocompleteField" 
                            required="">
              <md-item-template>
                <span md-highlight-text="ctrl.searchText">{{item.Title}}</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 movie.</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>
          </div>
        </form>
      </md-content>
    </div>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-animate.min.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-route.min.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-aria.min.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-messages.min.js'></script>
    <script src='https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.0-rc4/angular-material.js'></script>
    <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js'></script>    
  </body>
</html>

Finally I have done it. Here is the solution.

这篇关于带有 $http 调用的 Angular Material 自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

带有 $http 调用的 Angular Material 自动完成 [英] Angular Material autocomplete with $http call

问题描述

控制器

服务

查看

Result

Controller

Service

View

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

带有 $http 调用的 Angular Material 自动完成 [英] Angular Material autocomplete with $http call

问题描述

控制器

服务

查看

Result

Controller

Service

View

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭