How do I clear a field after selecting a type?

Using ui.bootstrap after you select one of the options provided by typeahead, how do you clear the input value?

var app = angular.module("app", ['ui.bootstrap']);

app.controller('createBundle', ['$scope', '$http', '$location',
    function($scope, $http, $location){
  $scope.products = [{name: 'One'}, {name: 'Two'}];

  $scope.bundle = {
    name: '',
    products: [],
    technologies: [],
    deliveryMethods: [],

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

  $scope.resetProducts = function(){
    $scope.bundle.products = [];




    <input type="text" class="form-control" id="products" 
typeahead=" for product in products | filter:$viewValue | limitTo:8" 
placeholder="Products" typeahead-on-select="addProduct($item, $model, $label)">



typeahead-on-select="addProduct($item, $model, $label);tempProduct=null"



source to share

2 answers

In your function, addProduct

you need to clear the input model

$scope.addProduct = function(item, model, label){
  $scope.tempProduct = null; //-- clear it




I was looking in the source code to give you a suggestion on how you could do this.

I made some changes and this is the result. You can see it in this plunker link.

$scope.addProduct = function(item){ $scope.bundle.products.push(item); $scope.tempProduct = ""; }



All Articles