Angular Js Type Ahead 在选择时调用函数

Question

// 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" alt="Angular.js Logo"> 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 type ahead 的新手，我已经使用 codepen 实现 Type Ahead 并成功完成，但我想扩展它，比如点击建议或选择我想调用angular js 函数并想要获取该值。

如何才能在点击时获得该价值？

任何帮助将不胜感激！

Answer 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/

Angular Js Type Ahead 在选择时调用函数

Angular Js Type Ahead call function on selection

css

typeahead

angularjs

angularjs-scope

angular-ui-typeahead