0

タイプアヘッドの結果を取得して、ブートストラップアラートに貼り付けようとしています。ユーザーが先行入力選択から複数回選択できるようにして、これにより複数のブートストラップアラートを作成できるようにしたいと思います。

これが私のサンプルです。現在、2 つの問題は次のとおりです。

  1. サンプルとしてもアラートが機能しない

  2. Alert と Typehead が互いに通信していない

    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 に残しておき、ユーザーがもう 1 つの項目を選択できるようにしたいと考えています。次に、ユーザーが選択肢を削除できるようにしたいと思います (ボタンまたは [x] をクリックします)。

これを実装する 1 つの方法は、( ui.bootstrap.alert ) を使用してユーザーの選択を記録することだと思います。

これが Alert を使用せずに可能であれば、それも問題ありません。

4

1 に答える 1