0

角的js類型提前打電話功能上選擇

// 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函數並希望獲得該值。

如何纔有可能獲得點擊的價值?

任何幫助將不勝感激!

回答

2

請檢查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/

+0

是是是現在的工作。其實我之前已經實現了這個功能,但由於使用了引導程序更新版本而無法正常工作,現在它可以在我的舊js中運行。讚賞#92sharmasaurabh –