Attempting to combine Angular UI Bootstrap's Typeahead with Alert

问题

I'm attempting to take the results of a typeahead and stick it into a bootstrap alert. I would like the user to be able to select multiple times from the typeahead select, and have this create multiple bootstrap alerts.

Here is my sample. Currently the two issues are:

alert does not work, even as a sample
Alert and Typeahead are not talking to each other

jsfiddle

My html:

<body ng-app="testApp">

<div class='container-fluid' ng-controller="TypeaheadCtrl">
    <pre>Choice: {{selected| json}}</pre>
    <input type="text" ng-model="selected" typeahead="sample for sample in samples | filter:$viewValue">
</div>

<div ng-controller="AlertDemoCtrl">
  <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{alert.msg}}</alert>
  <button class='btn' ng-click="addAlert()">Save Choice</button>
</div>

    </body>

My JS:

angular.module('testApp', ['ui.bootstrap']);

function TypeaheadCtrl($scope) {

  $scope.selected = undefined;
  $scope.samples = ["foo","bar","blah","foobar","blahblah"];
}

function AlertDemoCtrl($scope) {
     $scope.alerts = undefined;
    /* $scope.alerts = [
    { type: 'error', msg: 'Oh snap! Change a few things up and try submitting again.' }, 
    { type: 'success', msg: 'Well done! You successfully read this important alert message.' }
  ];*/

  $scope.addAlert = function() {
    $scope.alerts.push({msg: "Another alert!"});
  };

  $scope.closeAlert = function(index) {
    $scope.alerts.splice(index, 1);
  };

}

After the user chooses a proposed autocompletion, the result of the user's selection is displayed using: {{selected| json}}. I would like that choice to stay in the DOM, and allow the user to choose one more item. I would then like to give the user the ability to remove a choice (clicking a button or [x]).

It seems to me that one way to implement this would be to use (ui.bootstrap.alert) to record the user's selections.

If this is possible without using Alert, that would be fine, too.

回答1:

The great thing about directives from http://angular-ui.github.io/bootstrap/ is that those are native AngularJS directives that can be easily composed together. As it turns out it is very easy to combine the typeahead and the alert directives together using the typeahead-on-select attribute of the typeahead directive. By using typeahead-on-select you can specify a callback to be invoked when a selection is made in the typeahead.

Here is an example HTML:

<input type="text" ng-model="selected" typeahead-on-select="selectMatch($item)" typeahead="state for state in states | filter:$viewValue | limitTo:10">

and the callback function (selectMatch):

$scope.selectMatch = function(selection) {
    $scope.alerts.push({msg: selection});
    $scope.selected = '';
};

As you can see it is very easy to push a new alert when selecting a new match. Then you can simply display alerts:

<alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{alert.msg}}</alert>

I'm not sure what are the exact problems that you've faced when combining the typeahead and the alert directives together so here is the plunk with a working code demonstrating what is described above: http://plnkr.co/edit/i2x5csbrW1uKSISt2fqW?p=preview

来源：https://stackoverflow.com/questions/17757508/attempting-to-combine-angular-ui-bootstraps-typeahead-with-alert

标签

angularjs

typeahead

angular-ui-bootstrap