Clever Geek Handbook

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?

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)">

Decision

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


source to share


2 answers


In your function, addProduct

you need to clear the input model



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


source


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

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

+1


source






More articles:


All Articles