'Typeahead keep selected value seperate from ng-modal

Angularjs - 1.4
Typeahead Bootstrap - 3.0

Use case - User having a input field which is bound to item list.

  1. User searches a item
  2. selects item
  3. selected item with comma is appended
  4. User searches another item after the last pasted item
  5. Item list gets displayed
  6. selected item with comma is appended

HTML

<input ng-model="selectedItem"
       ng-change="searchItem(selectedItem)"
       uib-typeahead="item for item in items"             
       typeahead-on-select="appnedComma($item)"
/>

JS

$scope.searchItem=function(searchTerm){
    $scope.items=$post(searchTerm);

}

$scope.appnedComma=function(item){
    $scope.selectedItem=$scope.selectedItem+item+', ';
}

When the above last step is performed then the ng-model is overwritten with the selected item. Not withholding the last whole input in the list.

Ex . If user searches for item carrot and selectes carrot then input then selectedItem is withholding 'carrot, '. Now user searches another term mango , on selection of mango the selectedItem is over-written with Mango not withholding the previous 'carrot, ' . 'carrot, mango, ' should be the final list

Expectation - ng-model should be seperate from the selected $item thus should not override the ng-model on selection. Is it possible ?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source