Question

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

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

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

我无法正常工作，在我的应用程序中，第一个下拉列表中的每个更改都有$ http请求。正如指定here我使用.then（）而不是.success（）。我已经简化了plunker中的示例，因为代码较少：）

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

Answer 1

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

将第一个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>

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

1 个答案: