如何避免在下一个输入字段中显示选定的选项?
问题描述:
我有两个输入字段(输入字段1 &输入字段2),它们具有自动填充选项。如果我选择输入字段1中的一个选项,那么所选择的选项不应显示在输入字段2的选项中。去做?如何避免在下一个输入字段中显示选定的选项?
input field 1
<input type="text" ng-model="type1" uib-typeahead="value for value in gettype($viewValue)" >
input field 2
<input type="text" ng-model="type2" uib-typeahead="value for value in gettype($viewValue)">
$scope.gettype = function(val) {
return $http.get('api', {
params: {
type: val,
sensor: false
}
}).then(function(response){
return response.data.type;
});
};
这只是一个示例代码做即时通讯的规划是建立一个NG重复其重复,因为我想
答
可以使用NG-模糊选项输入字段尽可能多
考虑autofille_data作为数据
我们可以呼吁NG模糊函数
$scope.remode(autofill_data){
var index=autofill_data.indexOf($scope.input_val1);
autofill_data.splice(index, 1);
}
其中$ scope.input_val1是输入字段1中的值。
答
重复用于创建文本框。 之后,您需要删除已选择的那些值。例如:
html code
<span"><input type="text" ng-model="x.name1"</span>
<span"><input type="text" ng-model="x.name2"</span>
<span"><input type="text" ng-model="x.name3"</span>
js code:
Suppose your suggestion values are coming from array named $scope.usStates.
now you have to remove compare both value inside x an $scope.usStates and remove the matching element from $scope.usStates. you can use index of particullar element and splice method for removing an element.
example:
$scope.usStates.splice(index, 1);
$scope.usStates = [
{ name: 'ALABAMA', abbreviation: 'AL'},
{ name: 'ALASKA', abbreviation: 'AK'},
{ name: 'AMERICAN SAMOA', abbreviation: 'AS'},
{ name: 'ARIZONA', abbreviation: 'AZ'},
{ name: 'ARKANSAS', abbreviation: 'AR'},
{ name: 'CALIFORNIA', abbreviation: 'CA'},
{ name: 'COLORADO', abbreviation: 'CO'},
{ name: 'CONNECTICUT', abbreviation: 'CT'},
{ name: 'DELAWARE', abbreviation: 'DE'},
{ name: 'DISTRICT OF COLUMBIA', abbreviation: 'DC'},
{ name: 'FEDERATED STATES OF MICRONESIA', abbreviation: 'FM'},
{ name: 'FLORIDA', abbreviation: 'FL'},
{ name: 'GEORGIA', abbreviation: 'GA'}]
Thanks.
您可以通过使用在[自动完成](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete)属性试试2个字段。 –
@MarioAlexandroSantini thx快速响应。即时通讯使用ui.bootstrap.typeahead –
@Aswincj如其他用户已经问过,如果您向我们提供代码示例,那么您将更容易找到帮助。 –