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

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

这里是一个准备非工作plunker：通缉行为http://plnkr.co/edit/GxQujjAcxYdawlANJd9O?p=preview

说明：
当用户选择，让我们说：“这是一个A”，从第一个下拉，我想更新选项到$scope.numbersA，即[1,2,3]。对于输入“这是一个B”，相应的数字数组是$scope.numbersB等

我不能得到这个工作正常，在我的应用程序有第一个下拉菜单上的每个变化的$ http请求。如指定here我使用.then（）而不是.success（）。我已经简化在plunker的例子，因为有更少的代码:)AngularJS - 基于另一个md-autocomplete输入自动更新md-autocomplete搜索列表

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

来源

2016-03-09 peech

使用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>

来源

2016-03-09 10:28:24 Rayon

这一点调整工作在plunker并直接在我的应用程序。非常感谢你！ – peech

我想分享那个笨蛋，但它是私人的......反正......我很高兴它有帮助！ _Happy Coding_ – Rayon

感谢您的回答@Rayon – hurricane

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

回答

相关问题