試圖將Angular UI Bootstrap的Typeahead與Alert結合起來

我試圖將typeahead的結果粘貼到bootstrap alert中。我希望用戶能夠從typeahead選擇中多次選擇，並創建多個引導警報。試圖將Angular UI Bootstrap的Typeahead與Alert結合起來

這是我的例子。目前，這兩個問題是：

警報不起作用，即使作爲一個樣本
預警和事先鍵入的內容不互相交談

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）記錄用戶的選擇。

如果這可以不使用警報，那也可以。

來源

2013-07-20 ktm

關於來自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指令，因此在這裏組合在一起的時候，你所面臨的具體問題是一個工作代碼演示什麼是普拉克如上所述：http://plnkr.co/edit/i2x5csbrW1uKSISt2fqW?p=preview

來源

2013-07-20 08:15:40

完美！奇蹟般有效。很高興看到它完成了「角度的方式」。謝謝。 – ktm

試圖將Angular UI Bootstrap的Typeahead與Alert結合起來

回答

相關問題