Question

我正在显示bootstrap3 提示，点击保存按钮 成功/错误/警告消息将显示在按钮的下方。问题是ALERT已显示但未删除，如幻灯片功能无法正常工作，我编写的代码为In-Line HTML

<script type="text/javascript">
    window.setTimeout(function() {
        $(".alert").fadeTo(500, 0).slideUp(500, function(){
            $(this).remove(); 
        });
    }, 4000);
    </script>

这个相同的代码我使用了其他一些页面，它运行得很完美，但是在这个页面中我使用了AngularJs ng-switch condtion checking ..这里是HTML代码

＆＃13;

<div class="form-group" ng-model="ngModelAlertmsg" ng-switch="ngModelAlertmsg">
		<div class="col-md-9 col-md-offset-3">
		<script type="text/javascript">
		window.setTimeout(function() {
		    $(".alert").fadeTo(500, 0).slideUp(500, function(){
		        $(this).remove(); 
		    });
		}, 4000);
		</script>
	
			<div ng-switch-when="success" class="alert alert-success alert-dismissible fade in col-md-6 alert-trim">
				<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
				Charges Updated successfully.
			</div>
			<div ng-switch-when="failed" class="alert alert-danger alert-dismissible fade in col-md-6 alert-trim">
				<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
				Something went wrong,Please try again later. 
			</div>		
			<div ng-switch-when="warning" class="alert alert-warning alert-dismissible fade in col-md-6 alert-trim">
				<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
				Please check your given data. 
			</div>					            
		</div>
	</div>

＆＃13;

var app = angular.module('ngapppmanual', []);
app.controller('ngctrlmanual', function($scope, $http, $location) {

    $scope.ngshowchargelist = false;

    $scope.getChargeDetails = function()
    {
        var url = $location.absUrl() + "/showmanuallist/" + $scope.selectedcharge;

        var config = {
            headers : {
                'Content-Type' : 'application/json;charset=utf-8;'
            }
        }

        $http.get(url, config).then(function(response)
        {

            if (response.data.status == "success")
            {
                $scope.manualresult = response.data.dataObj;
                $scope.ngshowchargelist = true;
                $scope.ngModelAlertmsg = response.data.status;

            } else
                {
                $scope.getResultMessage = "Customer Data Error!";
                $scope.ngModelAlertmsg = "warning";
                }

        },
            function(response)
            {
            $scope.getResultMessage = "Fail!";
        });

    }

＆＃13;

我尝试在Chrome控制台中没有显示任何错误。所以我很困惑，请帮帮我。谢谢。

Answer 1

将您的ng-switch="ngModelAlertmsg"更改为ng-switch on="ngModelAlertmsg"，如documentation here中所示。

<div class="form-group" ng-switch on="ngModelAlertmsg">
    <div class="col-md-9 col-md-offset-3">
        <script type="text/javascript">
            window.setTimeout(function() {
                $(".alert").fadeTo(500, 0).slideUp(500, function(){
                    $(this).remove(); 
                });
            }, 4000);
        </script>

        <div ng-switch-when="success" class="alert alert-success alert-dismissible fade in col-md-6 alert-trim">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            Charges Updated successfully.
        </div>
        <div ng-switch-when="failed" class="alert alert-danger alert-dismissible fade in col-md-6 alert-trim">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            Something went wrong,Please try again later. 
        </div>      
        <div ng-switch-when="warning" class="alert alert-warning alert-dismissible fade in col-md-6 alert-trim">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            Please check your given data. 
        </div>
    </div>
</div>

是的......用法示例中的文档是错误的。：（

修改：

从顶级ng-model
中删除了<div>

Answer 2

最后我从这个网站得到了答案 http://itsolutionstuff.com/post/how-to-hide-div-after-some-time-using-angularjsexample.html

效果很好。

	<div ng-app = "mainApp" ng-controller = "myController">
		<p ng-hide="isCheck" style="background:red;padding:5px;">{{ myText }}</p>
        </div>
        
    <script>
  var mainApp = angular.module("mainApp", []);
	 mainApp.controller('myController', function($scope, $timeout) {
	      	$scope.myText = "This is for example";
	      	$scope.isCheck = false;
	      	$timeout(function () { $scope.isCheck = true; }, 4000);
	    });
  </script>

Bootstrap Alert - JS脚本功能不起作用

2 个答案: