试图角UI引导的键盘缓冲带结合警报警报、键盘、缓冲带、UI

2023-09-13 04:27:26 作者：败北.

我试图采取预输入的结果，并且将其放入一个引导警报。我希望用户能够从选择多次预输入选择，以及有此创建多个引导警报。

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

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

}

用户选择一个提议自动完成后，使用将显示在用户的选择的结果：{{选定| JSON}}。我想这样的选择留在DOM，并允许用户选择多了一个项目。那么我想给用户删除一个选择的能力（点击按钮或[X]）。

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]).

在我看来，一个方式来实现，这将是使用（ ui.bootstrap。警报），以记录用户的选择。

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.

推荐答案

有关指令的伟大的事情从 HTTP ：//angular-ui.github.io/bootstrap/ 是那些是可以很容易地组合在一起天然AngularJS指令。事实证明这是很容易结合预输入和警报指令一起使用预输入上选的预输入指令的属性。通过使用预输入上选你可以指定一个回调时选择在预输入由被调用。

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.

下面是一个例子HTML：

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

和回调函数（选择匹配）

$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>

我不知道是什么时候合并，你所面临的具体问题，预输入和警报指令一起所以这里是一个工作code证明什么上述普拉克：的 http://plnkr.co/edit/i2x5csbrW1uKSISt2fqW?p=$p$pview

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