Comment afficher un message pendant un certain temps dans angularjs

    <script>
      function Ctrl($scope, $window) {
        $scope.greeting = 'Hello, World!';
        $scope.doGreeting = function() {
           $scope.msg="hi";
        };
      }
    </script>
    <div ng-controller="Ctrl">
      <input type="text" ng-model="greeting" />
      <button ng-click="doGreeting()">click</button>
    {{msg}}
    </div>

Salut,Voici iam displyaing un message lorsque l'utilisateur clique sur le bouton.j'en veux pour preuve ce message pendant 10 secondes et ensuite se cacher.peut-u s'il vous plaît aidez-moi comment dois-je réaliser cela dans angularjs.

OriginalL'auteur user2992777 | 2014-05-01

  1. 7

    Vous pouvez définir une variable qui détermine si l'on doit afficher le message ou pas et de le cacher et après 10 000 secondes. Vous aurez à injecter $timeout comme indiqué ci-dessous. Alors, à votre avis, vous aurez besoin d'envelopper {{msg}} dans un laps afin d'utiliser ng-show

    <script>
  function Ctrl($scope, $window, $timeout) {
    $scope.greeting = 'Hello, World!';
    $scope.showGreeting = false;
    $scope.doGreeting = function() {
       $scope.msg="hi";
       $scope.showGreeting = true;
       $timeout(function(){
          $scope.showGreeting = false;
       }, 10000);
    };
  }
</script>
<div ng-controller="Ctrl">
  <input type="text" ng-model="greeting" />
  <button ng-click="doGreeting()">click</button>
  <span ng-show="showGreeting ">{{msg}}</span>
</div>

    OriginalL'auteur Brocco

  2. 1

    La façon dont je l'ai fait pour afficher un message pendant un certain temps dans angularjs a l'aide de AngularJS-Grille-Pain bibliothèque

    D'utiliser la bibliothèque, suivez ces étapes:

    <link href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/0.4.9/toaster.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js" ></script>
<script src="https://code.angularjs.org/1.2.0/angular-animate.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/0.4.9/toaster.min.js"></script>

    Ajouter un grille-pain contenant de la directive:

    <toaster-container></toaster-container>

    Préparer l'appel d'un grille-pain méthode:

    //Display an info toast with no title
    angular.module('main', ['toaster'])
    .controller('myController', function($scope, toaster) {
        $scope.pop = function(){
            toaster.pop('success', "title", "text");
        };
    });

    Contrôleur d'appel de méthode sur le bouton cliquez sur:

    <div ng-controller="myController">
    <button ng-click="pop()">Show a Toaster</button>
</div>

    Ici vous pouvez voir un Plunker, montrant de nombreuses sortes de toasts montrant les différents messages

    OriginalL'auteur Jorge Casariego

  3. 0

    Ajouter le $timeout dépendance à votre contrôleur. Voici un violon:

    <div ng-app>
    <div ng-controller="Ctrl">
        <input type="text" ng-model="greeting" />
        <button ng-click="doGreeting()">click</button>
        <div class="ng-hide" ng-show="showMessage">{{msg}} {{ greeting }}</div>
    </div>
</div>
    function Ctrl($scope, $window, $timeout) {
    var messageTimer = false,
        displayDuration = 5000; //milliseconds (5000 ==> 5 seconds)

    $scope.showMessage = false;
    $scope.msg = "hi";

    $scope.doGreeting = function () {
        if (messageTimer) {
            $timeout.cancel(messageTimer);
        }

        $scope.showMessage = true;

        messageTimer = $timeout(function () {
            $scope.showMessage = false;
        }, displayDuration);
    };
}

    OriginalL'auteur Brian Oliver