如何使用typeahead属性将初始值设置为文本框?

时间:2016-05-10 08:57:51

标签: angularjs twitter-bootstrap angular-ui-bootstrap angular-ui angular-ui-typeahead

我在angularjs项目中使用了typeahead。

我将此值显示在带有typeahead属性的文本框中:

  $scope.cities = [{id:1,address:'Berlin'},
                   {id:2,address:'Bonn'},
                   {id:3,address:'London'},
                   {id:4,address:'Miami'}];

这是带有typeahead属性的输入文本框:

<input type="text" 
ng-model="city" 
typeahead-input-formatter="inputFormatter($model)"
placeholder="Custom template"  
uib-typeahead="city as city.address for city in cities | filter:$viewValue"
class="form-control"  
typeahead-show-hint="true" 
typeahead-min-length="0"/>

这是plunker

如何将初始值设置为城市所在的文本框,例如id = 3。

1 个答案:

答案 0 :(得分:3)

如果您需要设置默认选择的值,那么您可以根据案例$scope.city(如HTML <input type="text" ng-model="city" ..中所示)为模型分配值,就像这样:

$scope.selected = {id:1, address:'Berlin'};
$scope.cities = [{id:1, address:'Berlin'},
                              {id:2,address:'Bonn'},
               {id:3,address:'London'},
               {id:4,address:'Miami'}];
//assign model value
$scope.city =  $scope.cities[3]   
//or do like this - $scope.city =  $scope.selected;

检查插件:http://plnkr.co/edit/zKkIbyGYetxQejyfBSnG?p=preview

如果它没有按ID排序,那么您仍然可以通过 id 找到它(假设您使用lodash,如果没有,则可以使用{{1}进行排序}}):

Array.forEach