只有在用户输入一个字符后，AngularJS才会调用数据库

AngularJS make a call to the database only after the user enters one character

本文关键字：字符 AngularJS 数据库 调用 一个 用户 输入      更新时间：2023-09-26

我创建了一个角材质自动补全。一切都很好，但现在我正试图修改代码，并在用户输入自动完成框中的一个字符后才调用数据库。getEmployees函数正在对数据库进行http调用。我试过了，但我得到的错误是seachText未定义。此外，我试图将自动完成的第一个字母传递给getEmployees。我在Plunker创建了一个项目:https://plnkr.co/edit/gLX5Tu0Jlvxh6T7HE6O3?p=preview

if(searchText != undefined || searchText != null) 
{
    getEmployees().then(function (users) 
    {
       vm.employees = employees
    })
}

在你的代码中md-item-text="item.name"是存在的，但是'name'键不在你的json中。使用 md-item-text = " item.FirstName " . .

下面的代码有点粗糙，不是DRY，但它基本上可以工作，所以希望它可以为您指明正确的方向

angular
  .module('AutocompleteApp', ['ngMaterial'])
  .controller('AutocompleteController', function($scope, $http, $filter) {
    var vm = this;
    // data for autocomplete
    vm.getMatches = function(searchText) {
      if (!vm.employees) {
        getEmployees().then(function(employees) {
          vm.employees = employees;
          var term = searchText && searchText.toLowerCase();
          if (!term) {
            return [];
          } else {
            return $filter('filter')(vm.employees, term);
          }
        });
      } else {
        var term = searchText && searchText.toLowerCase();
        if (!term) {
          return [];
        } else {
          return $filter('filter')(vm.employees, term);
        }
      }
    };
    // how we get employee data 
    function getEmployees() {
      return $http.get('employees.json').then(function(response) {
        return response.data;
      }, function failureCallback(response) {
        reject("Error!");
      });
    }
  });

https://plnkr.co/edit/QfHaZ6b3vFW57KeKBLhx?p =预览

相关文章：