尝试将 Angular UI Bootstrap 的 Typeahead 与 Alert 结合起来

Question

我正在尝试获取预先输入的结果并将其粘贴到引导警报中。我希望用户能够从预先输入的选择中多次选择，并让它创建多个引导警报。

这是我的示例。目前这两个问题是：

1. 即使作为示例，警报也不起作用

2. Alert 和 Typeahead 没有互相交流

   jsfiddle

我的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>

我的 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);
  };

}

在用户选择建议的自动完成后，用户选择的结果会显示为：{{selected| json}}。我希望该选择保留在 DOM 中，并允许用户再选择一项。然后，我想让用户能够删除选择（单击按钮或 [x]）。

在我看来，实现这一点的一种方法是使用 (ui.bootstrap.alert) 记录用户的选择。

如果不使用警报也可以做到这一点，那也很好。

Answer 1

来自http://angular-ui.github.io/bootstrap/ 的指令的伟大之处在于它们是可以轻松组合在一起的原生 AngularJS 指令。事实证明，使用typeahead 指令的typeahead-on-select 属性将typeahead 和alert 指令组合在一起非常容易。通过使用typeahead-on-select，您可以指定在预先输入中进行选择时要调用的回调。

这是一个 HTML 示例：

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

还有回调函数（selectMatch）：

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

如您所见，在选择新匹配时推送新警报非常容易。然后您可以简单地显示警报：

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

我不确定您在将 typeahead 和 alert 指令组合在一起时遇到的确切问题是什么，所以这里是一个带有工作代码的 plunk，演示了上述内容：http://plnkr.co/edit/i2x5csbrW1uKSISt2fqW?p=preview