Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Angular ui.bootstrap.alert 消息大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<!DOCTYPE html>
<html>
<head>
    <Meta name="viewport" content="width=device-width" />
    <title>AlerTindex</title>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/ui-bootstrap-tpls.js"></script>
    <script>
        angular.module('ui.bootstrap.demo',['ui.bootstrap'])
            .controller('AlertDemoCtrl',function ($scope) {
                $scope.alerts = [
                    { type: 'info',msg: '提示消息' },{ type: 'success',msg: 'Well done! You successfully read this important alert message.' },{ type: 'warning',msg: '警告信息' },{ type: 'danger',msg: 'Oh snap! Change a few things up and try submitTing again.' }
                ];

                $scope.addInfoAlert = function () {
                    $scope.alerts.push({
                        type: "info",msg: '消息 alert!',"dismiss-on-timeout": "3000",close: function () {
                            return closeAlert(this);
                        },});
                };
                $scope.addsuccesSALErt = function () {
                    $scope.alerts.push({ type: "success",msg: '成功 alert!' });
                };

                $scope.addWarningAlert = function () {
                    $scope.alerts.push({ type: "warning",msg: '警告 alert!' });
                };

                $scope.addDangerAlert = function () {
                    $scope.alerts.push({ type: "danger",msg: '危险 alert!' });
                };

                $scope.closeAlert = function (indeX) {
                    $scope.alerts.splice(index,1);
                };
            });
    </script>
</head>
<body ng-app="ui.bootstrap.demo">
    <div ng-controller="AlertDemoCtrl">
        <script type="text/ng-template" id="alert.html" >
            <div ng-transclude></div>
        </script>

        <div uib-alert ng-repeat="alert in alerts" ng-class="'alert-' + (alert.type || 'warning')" close="closeAlert($indeX)" dismiss-on-timeout="3000">{{alert.msg}}</div>

        <div uib-alert template-url="alert.html" style="BACkground-color:#fa39c3;color:white">A happy alert!</div>

        <button type="button" class='btn btn-info' ng-click="addInfoAlert()">Add Info Alert</button>
        <button type="button" class='btn btn-success' ng-click="addsuccesSALErt()">Add success Alert</button>
        <button type="button" class='btn btn-warning' ng-click="addWarningAlert()">Add Warning Alert</button>
        <button type="button" class='btn btn-danger' ng-click="addDangerAlert()">Add Danger Alert</button>
    </div>
</body>
</html>

大佬总结

以上是大佬教程为你收集整理的Angular ui.bootstrap.alert 消息全部内容,希望文章能够帮你解决Angular ui.bootstrap.alert 消息所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。