Time in angularJs
Hello when I record date in database I show a message for my user. I would like that after 3 second this message hide. how do that?
$scope.msg="Dados inseridos com sucesso"; after 3 second hide this menssage
$scope.msg="Dados inseridos com sucesso"; after 3 second hide this menssage
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>AngularJS com Mysql</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<style type="text/css">
<!--
.style5 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; }
.style8 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
-->
</style>
</head>
<body>
<div ng-app="myApp" ng-controller="cntrl">
<form>
Student Id: <input type="text" ng-model="id" name="id" ng-disabled="obj.idisable">
Student Name: <input type="text" ng-model="name" name="name">
<input type="button" value="{{btnName}}" ng-click="inserdata()">
{{msg}}
</form>
<table>
<thead>
<tr>
<th bgcolor="#EAEAEA"><span class="style5">Name</span></th>
<th bgcolor="#EAEAEA"><span class="style5">Roll No</span></th>
</tr>
</thead>
<tbody>
<select ng-model="cntrl" ng-options="data.Id as data.nome for data in data"></select>
<tr ng-repeat="student in data">
<td align="center"><span class="style8">{{student.Id}}</span></td>
<td align="center"><span class="style8">{{student.nome}}</span></td>
<td align="center"><button ng-click="deleteSud(student.Id);" >Delete</button></td>
<td align="center"><button ng-click="edtSud(student.Id, student.nome);" >Editar</button></td>
</tr>
</tbody>
</table>
</div>
<script>
var app=angular.module('myApp', []);
app.controller('cntrl', function($scope, $http){
/****************desabilitanto o id**********************/
$scope.obj={'idisable':false};
$scope.btnName="Gravar";
$scope.inserdata=function(){
/*****IMPORTANTE ENVIAR VIA POST******/
$http.post("insert.php", {'id':$scope.id, 'name':$scope.name, 'btnName':$scope.btnName})
.success(function(){
$scope.id = "";
$scope.name = "";
$scope.msg="Dados inseridos com sucesso";
$scope.displayStud();
})
}
$scope.displayStud=function(){
/*****IMPORTANTE PEGAR VIA GET******/
$http.get("select.php")
.success(function(data){
$scope.data=data
})
}
$scope.deleteSud=function(id){
/*****IMPORTANTE ENVIAR VIA POST******/
$http.post("delete.php",{'id':id})
.success(function(){
$scope.displayStud();
$scope.msg="Usuário excluído com sucesso";
})
}
$scope.edtSud=function(id, nome){
/*****IMPORTANTE ENVIAR VIA POST******/
/*$http.post("edt.php",{'id':id, 'nome':nome})
.success(function(){
$scope.displayStud();
$scope.msg="Usuário alterado com sucesso";
})*/
$scope.id=id;
$scope.name=nome;
$scope.obj.idisable=true;
$scope.btnName="Alterar";
$scope.displayStud();
}
});
</script>
</body>
</html>ASKER
right but I would like use this
Because this not run? The alert is okay but change msg not run
var app=angular.module('myApp', []);
app.controller('cntrl', function($scope, $http){
$scope.obj={'idisable':false};
$scope.btnName="Gravar";
$scope.inserdata=function(){
$http.post("insert.php", {'id':$scope.id, 'name':$scope.name, 'btnName':$scope.btnName})
.success(function(){
$scope.id = "";
$scope.name = "";
$scope.msg="Dados inseridos com sucesso"; /*myFunction();*/
setTimeout(function(){
$scope.msg = "aaaa";
alert('111111');
}, 1000);
$scope.displayStud();
})
}Because this not run? The alert is okay but change msg not run
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Greats! Thanks
You are welcome.
Simply add a $timeout() to remove the message after a certain period of time.
Inject $timeout into your controller
app.controller('cntrl', function($scope, $http, $timeout){
And then
Open in new window