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

Я показываю bootstrap3 тревога при нажатии Кнопка СОХРАНИТЬсообщения об успехе / ошибке / предупреждении появятся внизу кнопки. Проблема в том, что ALERT отображается, но не удаляется, поскольку функция скольжения не работает, я написал код In-Line HTML

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

Этот же код я использую на некоторых других страницах, он отлично работает, но на этой странице я использовал проверку условий AngularJs нг-переключатель ... Итак, вот 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!";
        });

    }

Я пробовал в хромированной консоли, она не показывала никаких ошибок.Поэтому я запутался, пожалуйста, помогите мне.Заранее спасибо.

если вы используете $ (". alert"). slideUp (2000, function () {$ (this) .remove ();}); , слайд вверх работает, зачем вам settimeout и fade?

Bhumi Shah 06.06.2018 09:46

Какую версию AngularJS вы используете? Я спрашиваю, потому что ng-switch был изменен в какой-то момент

Protozoid 06.06.2018 11:15

@BhumiShah, я знаю "$ (". Alert "). SlideUp (2000, function () {$ (this) .remove ();});" скрипт работает без использования ng-switch, вот в чем проблема.

Vignesh R 06.06.2018 11:56

@Protozoid Angular V1.6.9

Vignesh R 06.06.2018 11:56
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
4
251
2

Ответы 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> верхнего уровня.

,, никаких изменений не происходит .. другие попытки?

Vignesh R 06.06.2018 12:56

Скорректирована потенциальная проблема в ответ, попробуйте сейчас, пожалуйста

Protozoid 06.06.2018 13:01

извините, протозоид, все еще без изменений, сообщение не скрывается через 5 сек.

Vignesh R 06.06.2018 13:11

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

Другие вопросы по теме