css - 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 的新手，我已经使用了 codepen实现 Type Ahead 并成功完成，但我想扩展它，就像单击建议或选择一样，我想调用 Angular js 函数并想要获取该值。

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

如有任何帮助，我们将不胜感激!

Answer 1

请查看this

在 Controller 文件中添加以下内容:

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

};

在 View 中添加以下内容:

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