Angular ui-bootstrap typeahead选择多个

时间:2015-04-22 06:35:24

标签: javascript angularjs typeahead

在搜索某人时是否可以显示与某人相关的所有内容。并且还必须选择多个人。

这是我的示例代码.....

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
    <script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.2.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body>

<div class='container-fluid' ng-controller="TypeaheadCtrl">
    <input type="text" ng-model="selectedStuff" typeahead="stuff as stuff.desc for stuff in stuffs | filter:{name: $viewValue, desc: $viewValue}"/>
    <span>{{selectedStuff.name}}</span>
    <span>{{selectedStuff.desc}}</span>
</div>
  </body>
</html>

和js代码.....

angular.module('plunker', ['ui.bootstrap']);
function TypeaheadCtrl($scope) {

  $scope.stuffs= [
                {
                 "name":"thing1",
                 "desc":"this is the first thing",
                 "title": "this is the first title"
                },
                {
                 "name":"thing2",
                 "desc":"this is the second thing",
                 "title": "this is the second title"
                }
               ]
}

这里当我搜索它时只显示名称或desc或标题,但我需要显示整个三个属性而不是一个属性。

我需要选择多个类似标签..

请帮助解决这个问题。

提前致谢

1 个答案:

答案 0 :(得分:1)

我认为您需要将html更改为

<input type="text" ng-model="selectedStuff" 
typeahead="stuff as stuff.name + ' ' +stuff.desc + ' ' + stuff.title for stuff in stuffs | filter:{name: $viewValue, desc: $viewValue}"/>