CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
Siecje
Siecje

Reputation: 3712

How to clear the field after typeahead selection?

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

http://plnkr.co/edit/yz4EtEJSTVekSemzxagC?p=preview

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.bundle.products.push(item);
  }

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

}]);

HTML

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

Solution

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

Upvotes: 3

Views: 4289

Answers (2)

boykland
boykland

Reputation: 144

I forked your source code to give you a proposal of how you could do it.

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 = ""; }

http://plnkr.co/edit/9f7FsNEILQKdDN1GyUp6?p=info

Upvotes: 1

Ronnie
Ronnie

Reputation: 11198

In your addProduct function, you need to clear the model of the input

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

Upvotes: 2

Related Questions