javascript 将输入选择绑定到下拉 Angularjs
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21564050/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Binding input selection to dropdown Angularjs
提问by J. Davidson
Hi I have following input
嗨，我有以下输入
<input type="text" class="form-controlb" ng-model="item.name" id="name" placeholder="Enter Name" />
<input type="text" class="form-controlb" ng-model="item.name" id="name" placeholder="Enter Name" />
And following dropdown
和以下下拉菜单
<div class="col-sm-12" ng-model="query">
<select ng-model="item" class="form-control" ng-options="a.name for a in addemployees | filter:name | orderBy:'name'" value="{{a.name}}">
<option value="">[Select Employee..]</option>
</select>
</div>
Basically what I am trying to do is, when I enter name in the input box if dropdown has that name ints options to show it in dropdown. I tried to do do filter by name and than orderby name but it doesnt show any on dropdown as selection. Please let me know how to fix it. Thanks
基本上我想要做的是，当我在输入框中输入名称时，如果下拉列表具有该名称 ints 选项以在下拉列表中显示它。我尝试按名称而不是按名称进行过滤，但它在下拉列表中没有显示任何内容作为选择。请让我知道如何修复它。谢谢
回答by akonsu
something like this may work:
像这样的事情可能会起作用：
<input type="text" ng-model="text" />
<select ng-model="selectedOption" ng-options="option.name for option in options">
</select>
$scope.options = [{
name: 'a',
value: 'value-a'
}, {
name: 'b',
value: 'value-b'
}];
$scope.selectedOption = $scope.options[0];
$scope.$watch('text', function(v) {
for (var i in $scope.options) {
var option = $scope.options[i];
if (option.name === v) {
$scope.selectedOption = option;
break;
}
}
});
回答by user3266329
I hope my example will be useful -)
我希望我的例子会有用 -)
<table>
<tr>
<td align="right">Search :</td>
<td><input ng-model="query[queryBy]" /></td>
</tr>
<tr>
<td align="right">Search By :</td>
<td>
<select ng-model="queryBy">
<option value="$"></option>
<option value="name">NAME</option>
<option value="company">COMPANY</option>
<option value="designation">DESIGNATION</option>
</select>
</td>
</tr>
</table>
ng-repeat:
ng-重复：
<tr>
<tr ng-repeat="emp in employees | filter:query">
<td>{{emp.name}}</td>
<td>{{emp.company}}</td>
<td>{{emp.designation}}</td>
</tr>
JS:
JS：
angular.module('module3', [])
.controller('testCtrl3', function($scope){
$scope.query = {}
$scope.queryBy = '$'
$scope.items = [
{
"name" : "Ananchenko Juriy",
"company" : "GOOGLE. Ltd",
"designation" : "Creativ Director"
},
{
"name" : "Ananchenko",
"company" : "GOOGLE"
},
{
"name" : "Korman Juriy",
"company" : "GOOGLE. Ltd",
"designation" : "stager na ispitatelnom sroke"
}
];
$scope.orderProp="name";
});
});
