Question

我想在下面使用角度多重选择器自动完成功能是我的工作演示仅适用于选择一个项目。的 HTML

<!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.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script>
    <script src="script.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">
    <p></p>
    <b>Selected User</b>
    
    Enter a name: <input type="text" ng-model="selected" typeahead="user as (user.first + ' ' + user.last) for user in users | filter:$viewValue" />
</div>
  </body>
</html>

这是我的 js

angular.module('plunker', ['ui.bootstrap']);
function TypeaheadCtrl($scope) {

  $scope.selected = "";
  $scope.users = [
    {'id': 1, 'first': 'John', 'last': 'Depp', 'age':52, 'gender':'male'}, 
    {'id': 2, 'first': 'Sally', 'last': 'JoHanson', 'age':13, 'gender':'female'},
    {'id': 3, 'first': 'Taylor', 'last': 'Swift', 'age':22, 'gender':'female'},
    {'id': 4, 'first': 'Max', 'last': 'Payne', 'age':72, 'gender':'male'},
    {'id': 5, 'first': 'Jessica', 'last': 'Hutton', 'age':12, 'gender':'female'},
    {'id': 6, 'first': 'Nicholas', 'last': 'Cage','age':3, 'gender':'male'},
    {'id': 7, 'first': 'Lisa', 'last': 'Simpson', 'age':18, 'gender':'female'}
  ];

}

我可以用预先输入来做到这一点吗？还想从下拉菜单中选择多个值请帮帮我。

Answer 1

ui-select中的Mutiselect可能会为你完成这项工作

 <ui-select multiple class="form-control" ng-model="vm.selected" name="name" >
      <ui-select-match placeholder="Select or Search">{{$item.first}}</ui-select-match>
      <ui-select-choices repeat="val.first as val in vm.values | filter: $select.search">
       {{val.first}}
       <div ng-bind-html="val | highlight: $select"></div>
      </ui-select-choices>
    </ui-select>

此链接会给您一个大致的想法Multi select

角度多选择器自动完成。

1 个答案: