Question

选择typeahead提供的选项之一后使用ui.bootstrap如何清除输入值？

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

解决方案

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

Answer 1

在addProduct功能中，您需要清除输入的模型

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

Answer 2

我分叉了你的源代码，为你提供了如何做到这一点的建议。

我做了一些改变，这就是结果。你可以在这个plunker链接中看到它。

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

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

预先选择后如何清除字段？

解决方案

2 个答案: