AngularJS - 根据另一个 md-autocomplete 输入自动更新 md-autocomplete 搜索列表答案

【问题标题】：AngularJS - Automatically update md-autocomplete search list based on another md-autocomplete inputAngularJS - 根据另一个 md-autocomplete 输入自动更新 md-autocomplete 搜索列表
【发布时间】：2016-03-09 10:09:34
【问题描述】：

我有两个 <md-autocomplete> 下拉菜单。我想根据第一个下拉列表的选择更新第二个下拉列表的搜索列表。

这是一个准备好的非工作 plunker：http://plnkr.co/edit/GxQujjAcxYdawlANJd9O?p=preview

想要的行为描述：
当用户从第一个下拉列表中选择“这是一个 A”时，我想将选项更新为 $scope.numbersA，即 [1, 2, 3]。对于输入“这是一个 B”，对应的数字数组是 $scope.numbersB 等。

我无法让它正常工作，在我的应用程序上，第一个下拉菜单中的每个更改都有 $http 请求。正如here 指定的那样，我使用的是 .then() 而不是 .success()。我已经简化了 plunker 中的示例，因为代码更少:)

编辑：我刚刚注意到 plunker 中的 searchText 不能正常工作，那是因为我的搜索功能。这不是问题，它可以在我的应用程序上正常工作。

【问题讨论】：

标签： javascript angularjs autocomplete angular-material

【解决方案1】：

每次用户在第二个autocomplete 输入值时，使用md-no-cache 调用搜索处理程序。

传递第一个 autocomplete 选定值作为第二个自动完成的搜索处理程序的参数

试试这个：

// Code goes here
var app = angular.module('app', ['ngMaterial']);

app.controller('ctrl', ['$scope',
  function($scope) {
    $scope.letters = [{
      'display': 'This is an A',
      'value': 'a'
    }, {
      'display': 'This is a B',
      'value': 'b'
    }, {
      'display': 'This is a C',
      'value': 'c'
    }];
    $scope.numbersA = [1, 2, 3];
    $scope.numbersB = [4, 5, 6];
    $scope.numbersC = [7, 8, 9];

    $scope.getMatchesLetter = function(query) {
      if (query === null || query === "" || query === undefined)
        return $scope.letters;

      var results = query ? $scope.letters.filter(createFilterFor(query)) : $scope.letters;
      return results;
    };

    $scope.getMatchesNumber = function(query, selected) {
      var arrToSearch;
      switch (selected.value.toUpperCase()) {

        case 'A':
          arrToSearch = $scope.numbersA;
          break;

        case 'B':
          arrToSearch = $scope.numbersB;
          break;

        case 'C':
          arrToSearch = $scope.numbersC;
          break;

      }
      if (query === null || query === "" || query === undefined)
        return arrToSearch;

      var results = query ? arrToSearch.filter(createFilterFor(query)) : arrToSearch;
      return results;
    };

    $scope.itemChange = function(item, whichOne) {
      switch (whichOne) {
        case 'A':
          $scope.numbersA = item;
          break;
        case 'B':
          $scope.numbersB = item;
          break;
        case 'C':
          $scope.numberC = item;
          break;
      }
    };

    function createFilterFor(query) {
      var lowercaseQuery = angular.lowercase(query);
      return function filterFn(state) {
        //return (state.value.indexOf(lowercaseQuery) === 0); // startsWith()
        return (state.value.search(lowercaseQuery) != -1); // contains()
      };
    }

  }
]);;

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>


  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css">
  <script src="script.js"></script>
</head>

<body ng-app='app' ng-controller='ctrl'>
  <md-autocomplete md-selected-item="selectedItemLetter" md-search-text="searchTextLetter" md-selected-item-change="itemChange(item)" md-items="item in getMatchesLetter(searchTextLetter)" md-item-text="item.display" md-min-length="0" placeholder="Select letter">
    <md-item-template>
      <span md-highlight-text="searchTextLetter">{{item.display}}</span>
    </md-item-template>
    <md-not-found>No matches found.</md-not-found>
  </md-autocomplete>

  <br>
  <br>

  <md-autocomplete md-selected-item="selectedItemNumber" md-search-text="searchTextNum" md-selected-item-change="itemChange(item)" md-items="item in getMatchesNumber(searchTextNumber,selectedItemLetter)" md-no-cache="true" md-item-text="item" md-min-length="0"
  placeholder="Select number">
    <md-item-template>
      <span md-highlight-text="searchTextNumber">{{item}}</span>
    </md-item-template>
    <md-not-found>No matches found.</md-not-found>
  </md-autocomplete>
</body>

</html>

【讨论】：

这个小调整在 plunker 中有效，直接在我的应用程序上有效。非常感谢！
我想分享 plunker，但它是私人的......无论如何......我很高兴它有帮助！ 快乐编码
感谢您的回答@Rayon
谢谢@Rayon！我一直在寻找相同的解决方案，这解决了我的问题。