0

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

这是我的样本。目前这两个问题是：

  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）来记录用户的选择。

如果这在不使用警报的情况下是可能的，那也很好。

4

1 回答 1

3

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

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

于 2013-07-20T08:15:40.353 回答