Catch duplicate exception in ng-repeat table Angularjs

user_3468639 0
Viewed 724

I'm Trying to notify the user each time a duplicate is registered in a table. I would like to catch the: Error: [ngRepeat:dupes] and alert the user before proceeding. Here is the controller method adding elements to the table: 

$scope.addProdukt = function (item) {
    kladdValidationService.checkTable(); 
    try {
        $scope.addedResult.push(item); // works fine
        logService.info('Produktet er lagt til i tabellen'); 

    } catch (e) {
        console.log(e.stack); 
        console.log($exceptionHandler(e)); // neither of these two work
    }
    console.log($scope.addedResult);
};

Every time I push an already added item to the table, the Error: [ngRepeat:dupes] outputs in the console. Juswt not sure how to catch it.

angularjs exception-handling
4 Answers

The reason the error isn't caught is because pushing the duplicate into the array is perfectly valid and doesn't cause an exception. the exception happens in the ng-repeat directive.

If you wish to notify your user when they try to add a duplicate try something like this:

$scope.addProdukt = function (item) {
    if(addedResult.indexOf(item) != -1){
        console.log("You tried to add a duplicate");
    }else{
         $scope.addedResult.push(item);
    }
}

If you wanted to warn the user about a duplicate but still let them have duplicates then you can show it in the html by adding track by $index in your ng-repeat i.e:

<div ng-repeat="item in $scope.addedResult track by $index">
</div>
user_27067950

You can try followings:

track by $index always remove the duplicasy

<div ng-repeat="n in [42, 42, 43, 43] track by $index">
  {{n}}
</div>
user_79481520

I would like to catch the: Error: [ngRepeat:dupes] and alert the user before proceeding.

To show to the users that your code crashed with Exception?

Its not good practice to catch Exceptions of your code and notify users about. Keep in mind that after Error: [ngRepeat:dupes] - your code doesn't work properly! It can cause to unexpected behavior. Digest cycle stops and so on.

I strongly suggest you to write logic that searches in arrays duplicate ids and notify users.

Don't use Angular Exception flow for your needs!

Anyways if you want to manage exceptions, you can catch override $exceptionHandler :

For example:

app.config(function($provide) {

   $provide.decorator("$exceptionHandler", function($delegate, $injector) {
    return function(exception, cause) {

            var data = {
                message: "Exception: " + exception.message,
                stack: exception.stack || "none"
            };

             // manage your exception
             alert(JSON.stringify(data));


            // Call The original Angular Exception Handler
            $delegate(exception, cause);

       };
   });

});

Demo Plunker

After you can inject some service and pass all Exception data there:

// ...
var someService = $injector.get("SomeService"); 

someService.reportClientError(data).then(function(data) {
               //...
            }, function(error) {
                //...
            });
user_16313790

Something along this lines? Unfortunately, I can not test this right now but the core was taken from anguarJS sample code that describes how to log exceptions 

angular.
module('exceptionOverwrite', []).
factory('$exceptionHandler', [function() {
var exceptions = [];
return function myExceptionHandler(exception, cause) {
   if(exceptions.indexOf(exception) !== -1) 
    {// its duplicate do your thing
     }
   this.exceptions.add(exception)
};
}]);
user_54397820
Related