Bootstrap Alert - функция скрипта JS не работает

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 проверку состояния ... Так вот HTML-код

<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>

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!";
        });

    }

Я пробовал в Chrome консоли, он не показывает никаких ошибок. Так что я в замешательстве, пожалуйста, помогите мне. Спасибо заранее.

Answer 1

Наконец-то я получил ответ с этого сайта 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>

Answer 2

Измените ng-switch="ngModelAlertmsg" на ng-switch on="ngModelAlertmsg", как показано в документации здесь .

<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>