尝试将 Angular UI Bootstrap 的 Typeahead 与 Alert 结合起来 [英] Attempting to combine Angular UI Bootstrap's Typeahead with Alert
问题描述
我正在尝试获取预先输入的结果并将其粘贴到引导程序警报中.我希望用户能够从预先输入的选择中多次选择，并创建多个引导程序警报.
这是我的样本.目前两个问题是:
- 警报不起作用，即使是作为样本
Alert 和 Typeahead 没有相互交谈
我的 html:
<div class='container-fluid' ng-controller="TypeaheadCtrl"><预>选择:{{selected|json}}</pre><input type="text" ng-model="selected" typeahead="sample for sample in samples | filter:$viewValue"><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()">保存选择</button>
我的JS:
angular.module('testApp', ['ui.bootstrap']);函数 TypeaheadCtrl($scope) {$scope.selected = 未定义；$scope.samples = ["foo","bar","blah","foobar","blahblah"];}函数 AlertDemoCtrl($scope) {$scope.alerts = 未定义；/* $scope.alerts = [{ type: 'error', msg: '哦！更改一些内容，然后再次尝试提交.},{ type: 'success', msg: '干得好！您已成功阅读此重要警报消息.}];*/$scope.addAlert = function() {$scope.alerts.push({msg: "另一个警报！"});};$scope.closeAlert = 函数(索引){$scope.alerts.splice(index, 1);};}在用户选择建议的自动完成后，用户选择的结果使用:{{selected| 显示json}}.我希望该选择保留在 DOM 中，并允许用户再选择一项.然后，我想让用户能够删除选择(单击按钮或 [x]).
在我看来，实现这一点的一种方法是使用 (ui.bootstrap.alert) 来记录用户的选择.
如果不用 Alert 也能做到这一点，那也没关系.
http 指令的伟大之处://angular-ui.github.io/bootstrap/ 是那些可以轻松组合在一起的原生 AngularJS 指令.事实证明，使用 typeahead-on-select 属性将 typeahead 和 alert 指令组合在一起非常容易>typeahead 指令.通过使用 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
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
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.
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
这篇关于尝试将 Angular UI Bootstrap 的 Typeahead 与 Alert 结合起来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
