How to create a confirmation dialogue box in angular js?

Question

I have a group of array in $scope.firstorder. For example:

Based on some condition like array contains an element Quantity. If Qunatity is zero i need to remove this array from the list of arrays.

How can I do that?

 for (index in $scope.firstorder)
    {
        var quantity = $scope.firstorder[index][0].Quantity;
        if (quantity == 0)
        {
            Remove the array element from $scope.firstOrder;
        } 


    }

Answer 1

Prepare your HTML

First, start off with a blank HTML page.

Create a link that you would like to run a function() on when clicked and confirmed.

It should look something like this:

 <a href="#" ng-click="shoutOut()">Shout!</a>

Lets add a couple of custom attributes that describes what we want to do with it.

<a href="#" ng-click="shoutOut()" confirmation-needed="Do you really want to
shout?">Shout!</a>

We've added confirmation-needed to define a custom message to be displayed when we want the user to confirm the results.

Function

With your HTML already looking like how it should look like, lets create the function

assuming your code lives in a Angular Controller

app.controller('wooCtrl', function($scope){
  $scope.shout = function() {
    alert('YO MR WHITE!');
  };    
});

Directive

Now, lets tell Angular how to handle the custom attribute 'confirmation-needed' by writing a custom directive. If you are a little lost at this stage, maybe this introduction to directives video could help..

app.directive('confirmationNeeded', function () {
    return {
    priority: 1,
    link: function (scope, element, attr) {
      var msg = attr.confirmationNeeded || "Are you sure?";
      var clickAction = attr.ngClick;
      element.bind('click',function (e) {
        scope.$eval(clickAction) if window.confirm(msg)
        e.stopImmediatePropagation();
        e.preventDefault();
       });
     }
    };
});