Angular Js Type Ahead 选择时调用函数

Posted 2023-03-06

【中文标题】Angular Js Type Ahead 选择时调用函数

【英文标题】：Angular Js Type Ahead call function on selection

【发布时间】：2016-09-05 08:04:19

【问题描述】：

// https://angular-ui.github.io/

// setup app and pass ui.bootstrap as dep
var myApp = angular.module("angularTypeahead", ["ui.bootstrap"]);

// define factory for data source
myApp.factory("States", function() 
  var states = ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Dakota", "North Carolina", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"];

  return states;

);

// setup controller and pass data source
myApp.controller("TypeaheadCtrl", function($scope, States) 

  $scope.selected = undefined;

  $scope.states = States;

);

body 
  max-width: 32em;
  margin: 1em auto 0;

img 
  width: 30px;

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<div ng-app="angularTypeahead">
  <div class="container-fluid" ng-controller="TypeaheadCtrl">
    <h2><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/angular-logo.svg" > Angular.js Typeahead</h2>
    <div class="form-group">
      <label for="states">Search for US States</label>
      <input name="states" id="states" type="text" placeholder="enter a state" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">
    </div>
    <button class="btn btn-success" type="submit">Submit</button>
  </div>
</div>

您好，我是 Angular js 类型的新手，我已经使用 codepen 来实现 Type Ahead 并成功完成，但我想扩展它，比如单击建议或选择我想调用 Angular js 函数并希望得到它价值。

如何在点击时获得该值？

任何帮助将不胜感激！

【参考方案1】：

请查看this

在控制器文件中添加以下内容：

 $scope.onSelect = function ($item, $model, $label) 
$scope.$item = $item;
$scope.$model = $model;
$scope.$label = $label;

;

在视图中添加以下内容：

<input type="text"
    ng-model="selected"
    typeahead="state for state in states | filter:$viewValue"
    typeahead-editable="false"
    typeahead-on-select="onSelect($item, $model, $label)"/>

您可以查看http://www.techguides.in/how-to-create-autocomplete-using-angularjs-ui/

【讨论】：

是的，是的，它现在可以工作了。实际上我之前已经实现了这个但由于使用了引导更新版本而无法正常工作，它现在可以在我的旧 js 中使用。赞赏 #92sharmasaurabh