AngularJS-根据另一个md-autocomplete输入自动更新md-autocomplete搜索列表
[英]AngularJS - Automatically update md-autocomplete search list based on another md-autocomplete input
问题描述
I have two <md-autocomplete> drop-downs. 
我有两个<md-autocomplete>下拉菜单。 I would like to update the search list of the second drop-down based on the selection of the first dropdown. 我想根据第一个下拉列表的选择来更新第二个下拉列表的搜索列表。
Here is a prepared non-working plunker : http://plnkr.co/edit/GxQujjAcxYdawlANJd9O?p=preview 这是一个准备好的无法使用的插件： http ://plnkr.co/edit/GxQujjAcxYdawlANJd9O?p=preview
Description of wanted behavior : 想要的行为的描述 ：
when a user selects let's say "This is an A" from the first drop-down, I would like to update options to $scope.numbersA , that is [1, 2, 3]. 当用户从第一个下拉列表中选择“这是A”时，我想将选项更新为$scope.numbersA ，即[1、2、3]。 For input "This is a B" the corresponding number array is $scope.numbersB , etc. 对于输入“ This is B”，相应的数字数组为$scope.numbersB ，等等。
I cannot get this to work properly, on my app there is $http request for every change on the first drop-down. 我无法使其正常运行，在我的应用程序上，第一个下拉菜单中的每个更改都需要$ http请求。 As specified here I am using .then() and not .success(). 如此处指定，我使用的是.then（）而不是.success（）。 I have simplified the example in plunker because there is less code :) 我简化了plunker中的示例，因为代码更少:)
Edit : I have just noticed the searchText in plunker is not working properly, that's because of my search function. 编辑 ：我刚刚注意到在plunker中的searchText不能正常工作，这是因为我的搜索功能。 This is not an issue, it works as it should on my app. 这不是问题，它可以在我的应用程序上正常工作。
1 个解决方案
解决方案1
4 已采纳 2016-03-09 10:28:24
Use md-no-cache to invoke the search handler every time user types value in second autocomplete . 每当用户在第二个autocomplete键入value时，请使用md-no-cache调用搜索处理程序。
Pass first autocomplete selected value as argument for search handler of second autocomplete 将第一个autocomplete选择的值作为第二个自动完成的搜索处理程序的参数传递
Try this: 尝试这个：
// 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.