角度Jsの種類は控え

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>

こんにちは、私は先に角度JSタイプに新しいです選択に関数を呼び出すと、私は先の種類を実装するためにcodepenを使用し、正常に完了したが、私はそれがクリック気に入っ展開したいです提案や選択角度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/