使用 Angular-ui Bootstrap 设置预输入选项 [英] Setting options for typeahead, using Angular-ui Bootstrap
问题描述
使用 typeahead,我尝试设置几个选项,这些选项可用作标准 Bootstrap 输入选项
使用以下代码,我可以将minLength"属性设置为typeahead-min-length",但将items"设置为typeahead-items"不会.有没有不同/更好/标准的方法来做到这一点?有没有办法将一组选项附加到 $scope 上?
<input type="text" ng-model="selected"typeahead="foo for foo in foo | filter:$viewValue" typeahead-items='5' typeahead-min-length='3'><预>{{选择|json}}</pre>
更新:我试图坚持只使用 AngularJS,而不是使用 jQuery
这是我的控制器:
myAppModule.controller('TestController', function($http,$scope) {$scope.selected = 未定义;$http.get('data/sample.json').then(功能(结果){$scope.foo = results.data;});});
为什么不用JS的方式来初始化typeahead:
$('input.typeahead').typeahead({来源:array_of_value_here,最小长度:1,项目:5,//您的选项值...});
我明白了,AngularJS的方式,你可以使用limitTo
:
Using typeahead, I am trying to set a couple of options, which are available as standard Bootstrap typeahead options
Using the following code, I'm able to set the "minLength" property by putting it in-line as "typeahead-min-length", but doing the same with "items" as "typeahead-items" does not. Is there a different/better/standard way to do this? Is there a way to attach an array of options to $scope?
<div class='container-fluid' ng-controller="TestController">
<input type="text" ng-model="selected"
typeahead="foo for foo in foo | filter:$viewValue" typeahead-items='5' typeahead-min-length='3'>
<pre>{{selected| json}}</pre> </div>
Update: I'm trying to stick with just AngularJS, and not use jQuery
This is my controller:
myAppModule.controller('TestController', function($http,$scope) {
$scope.selected = undefined;
$http.get('data/sample.json')
.then(function(results){
$scope.foo = results.data;
});
});
Why don't you use the JS way to initialize typeahead:
$('input.typeahead').typeahead({
source: array_of_value_here,
minLength: 1,
items: 5,
// your option values ...
});
EDIT:
I see, the AngularJS way, you can use limitTo
:
<input type="text" ng-model="selected" typeahead="foo for foo in foo | filter:$viewValue | limitTo:5" typeahead-min-length='3'>
这篇关于使用 Angular-ui Bootstrap 设置预输入选项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!