CODEWITHSUNDEEP
angularjsbootstrap-typeahead
MFB
MFB

Reputation: 19797

Build a list using Bootstrap ui-typeahead

I'm trying to build a tags input field exactly like the one on this site. The user can start typing tags, the ui-typeahead returns a list from which the user selects a single result, adding it to the list of tags already in the input field.

I started by simplifying the problem to a string concatenation, instead of a list. I can't even get that to work. This is where I've got to, but it doesn't concatenate with the existing value of the field, it replaces it:

<input class="form-control" type="text" ng-model="program.Demographs"
    typeahead="d for d in program.providers.Demographs"
    typeahead-min-length='3' typeahead-items='10'
    typeahead-editable="false"
    typeahead-on-select="addItem(program.Demographs)">

Here is the function that should concatenate the string:

$scope.addItem = function (item) {
    $scope.program.Demographs = $scope.program.Demographs + item;
};

Can anyone offer any hints or advice?

Upvotes: 1

Views: 1162

Answers (2)

MFB
MFB

Reputation: 19797

I thought I'd answer this myself after figuring out that it is not possible to add items to the existing selection in the typeahead input field. Instead, you have to add to a different string or array, not the one bound to the typeahead. Here is an example:

$scope.addDemograph = function (item) {
    if ($scope.program.Demographs.indexOf(item) == -1) {
        $scope.program.Demographs.push(item);
    }
    $scope.demographs_input = [];
};

<input class="form-control" type="text" placeholder="Demographs"
   ng-model="demographs_input"
   typeahead="d for d in program.providers.Demographs"
   typeahead-on-select="addDemograph(demographs_input)"> // adds input val to list

<ul class="list-inline">
<li ng-repeat="d in program.Demographs"></li> <!--this list is added to automagically-->
</ul>

Upvotes: 1

BKM
BKM

Reputation: 7079

Try this instead of concatenating;

 $scope.program.Demographs = [];

    $scope.addItem = function (item) {
        $scope.program.Demographs = $scope.program.Demographs.push(item);
    };

Upvotes: 1

Related Questions