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 函数并希望获得该值。

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

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

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/