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
Siecje
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
Ronnie
source
to share
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
clenondavis
source
to share