角型で5秒後に配列要素を取り除く具体的な方法はありますか？

Question

Angular 1を使用するシステムで通知消滅機能を開発したいと考えています。

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope, $timeout) { 
    $scope.notifications = []; 
    $scope.makeNotification = function(notification) { 
     var index = $scope.notifications.length; 
     $scope.notifications.push({notification:notification + " " + index}); 
     $timeout(function() { 
     $scope.notifications.splice(index, 1); 
     }, 5000); 
    } 
}); 

これは私が期待どおりに動作：

<div ng-app="myApp" ng-controller="myCtrl"> 
    <button ng-click='makeNotification("New Notification")'>Add</button> 
    <ul> 
    <li ng-repeat='n in notifications'>{{n.notification}}</li> 
    </ul> 
</div> 

JSコード：ここに私のHTMLコードです。そのコードのバグと思われます。一部の通知は削除されずに残ります。

これを行うには他に良い方法がありますか？以下は私が作成したjsfiddleです。 https://jsfiddle.net/niroshanJ/Lseaphrt/7/

Answer 1

数秒以内に複数の通知が追加された場合は、indexが間違った位置を指しているため、削除されない通知がある可能性があります。

通知の位置をアレイ内で追跡するのではなく、通知自体を追跡する必要があります...

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope, $timeout) { 
    $scope.notifications = []; 
    $scope.makeNotification = function(notification) { 
     var index = $scope.notifications.length; 

     // need to keep track of this rather than the index it's added at! 
     var notificationObject = { notification: notification + " " + index }; 
     $scope.notifications.push(notificationObject); 

     //preserve context by wrapping the function that will be called by $timeout 
     var timeoutFunc = (function(obj){ 
      return function() { 
       var index = $scope.notifications.indexOf(obj) 
       if (index >= 0) 
        $scope.notifications.splice(index, 1); 
      }; 
     })(notificationObject); 

     $timeout(timeoutFunc, 5000); 
    } 
}); 

や他の人があなただけの配列内の最初の項目を削除する可能性が指摘したように

- ずっと簡単に。

Answer 2

トラスターを使用して、手動コードではなく通知を表示できます。そしてそれは非常に簡単です。トースターは、指定された時間が経過すると自動的にメッセージをクリアします。必要に応じて

https://github.com/Foxandxss/angular-toastr

OR

：

角度トースターのため、下記のリンクに従ってください亭、使用してインストールするには：

bower install --save angularjs-toaster 

やNPMとを：

を

npm install --save angularjs-toaster 

またはリンクスクリプトを使用して： は//ボタンの無いタイトル

angular.module('main', ['toaster', 'ngAnimate']) 
    .controller('myController', function($scope, toaster) { 
     $scope.pop = function(){ 
      toaster.pop('info', "title", "text"); 
     }; 
    }); 

呼制御方式で情報トーストを表示します。次に

<link href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/1.1.0/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/1.1.0/toaster.min.js"></script> 

はトースターメソッドの呼び出しを準備クリック：

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

Answer 3

通知を表示する最善の方法は、toastrや通知などのサードパーティ製のモジュールを使用することです。あなたがあなた自身のその後の代わりに、（一度に複数を作成した場合のみ、通知を削除します）spliceを使用して作成する場合でも、あなただけul

HTML

<div ng-app="myApp" ng-controller="myCtrl"> 
    <button ng-click='makeNotification("New Notification")'>Add</button> 
    <ul ng-if="destroyNotification"> 
    <li ng-repeat='n in notifications'>{{n.notification}}</li> 
    </ul> 
</div> 

JSを破壊する可能性が

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope, $timeout) { 
    $scope.notifications = []; 
    $scope.makeNotification = function(notification) { 
     $scope.destroyNotification = true; // intitalize it to true 
     var index = $scope.notifications.length; 
     $scope.notifications.push({ 
      notification: notification + " " + index 
     }); 
     $timeout(function() { 
      $scope.destroyNotification = false; // after 5 seconds, destroy the element 
     }, 5000); 
    } 
}); 

PS私はこれをテストしていない。

Answer 4

ただ、インデックスで使用可能なバグ

var app = angular.module('myApp', []); 
    app.controller('myCtrl', function($scope, $timeout) { 
     $scope.notifications = []; 
     $scope.makeNotification = function(notification) { 
      var index = $scope.notifications.length; 
      $scope.notifications.push({notification:notification + " " + index}); 
      $timeout(function() { 
      var Deleteindex = $scope.notifications.length-1; 
      $scope.notifications.splice(Deleteindex, 1); 
      }, 5000); 
     } 
    });