CODEWITHSUNDEEP
javascripthtmlangularjstwitter-bootstrap
MetalSlugSnk
MetalSlugSnk

Reputation: 63

AngularJs & Bootstrap button to set value in typeahead

Hello everyone this is my first question on stack overflow

I am trying to make my application so when i push a button a value will be typed into a typeahead does anyone have a method of doing this?

Thank you

Upvotes: 0

Views: 197

Answers (1)

Aleksey Solovey
Aleksey Solovey

Reputation: 4191

Simply populate ng-model's value on click of a button using ng-click.

Here is an example:

var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('myCtrl', function($scope) {
  $scope.data = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];
  $scope.populate = function(index) {
    $scope.value = $scope.data[index || 0];
  }
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />

<body>
  <div ng-app="myApp" ng-controller="myCtrl">

    <input type="text" ng-model="value" uib-typeahead="val for val in data | filter:$viewValue | limitTo:5" class="form-control">
    <button ng-click="populate(0)" class="btn btn-info">Populate</button>

    <pre>Value: {{value | json}}</pre>

  </div>
</body>
</html>

Upvotes: 1

Related Questions