Angularjs Model or Popup window by ngDialog API

ngDialog  API is used to provide Popup and Model window for Angulajs application. This API has open() method to open dialog window or creates new dialog instance.

.open (options):

This method is used to open dialog window, creates new dialog instance on each call. It accepts options object as the only argument.

       

 ngDialog.open({

                template: ‘url’,

                className:’cssStyle’,

                scope: $scope,  --->  pass current controller scope object to dialog

                showClose: false,

                overlay: true,

                closeByEscape: false,

            });

additional source : https://github.com/likeastore/ngDialog
Other angular related blogs :

AngularJs :$broadcast () , $on() and $emit()

AngularJs :scope.$watch, $watchgroup and $watchCollection
Angularjs : foreach loop

Thanks for Visiting !!

Angularjs : foreach loop

angular.forEach() invokes the iterator function once for each item in obj collection, which can be either an object or array.

Syntax of ForEach loop in AngularJS:

angular.forEach($scope.data, function(value, key){});

Here are few example of angular.forEach() function:

1. Object Properties iteration:

   angular.forEach() function can be used to iterate of each property of object.

var values = {name: 'misko', gender: 'male'};

angular.forEach(values, function(value, key)

 {

    console.log(key + ': ' + value);

});

2. Object Collection Iteration:

angular.forEach() function can be used to iterate of each item of collection.

var values = [

  { "Name" : "Thomas", "Password" : "thomasTheKing" },

  { "Name" : "Linda", "Password" : "lindatheQueen" }

]

angular.forEach(values, function(value, key)

 {

  console.log ('Index:' + value.Nam);

  console.log ('Name: ' + value.Name);

  console.log ('Password: ' + value.Password);

});

Here key will work as Index of object in collection

Other blogs related to AngularJs :

AngularJs :$broadcast () , $on() and $emit()

AngularJs :scope.$watch, $watchgroup and $watchCollection

Angularjs : Model or Popup window by ngDialog API

Broadcast and Emit in angularjs

In Angular $broadcast() service is always used to propagate event to all of his child controller and it’s registered parent $rootscope.scope listeners.  

  $rootScope.$broadcast('SummaryEvent', {

                priority: priority               

            });

$on() service is used to listen on any given type of event raised by $broadcast and $emit

   $scope.$on(''SummaryEvent'', function (event, args) {

Vm.priority=args.priority

        });

AngularJs  $broadcast ()  and  $on()  

$emit service is similar to $broadcast but it is used to propagate event to upwards through the scope hierarchy and notify to the registered $rootScope.Scope listeners

AngularJs  $on() and $emit()

Thanks for Visiting !!
Other Links :
AngularJs :scope.$watch, $watchgroup and $watchCollection
Angularjs : foreach loop
Angularjs : Model or Popup window by ngDialog API

AngularJs scope.$watch, $watchgroup and $watchCollection

$watch service helps us to do something or run any business logic when any property or variable value attached to $scope changed

$watch(variable, listener)

function MyController($scope) {

   $scope.myVar = 1;

   $scope.$watch('myVar', function() {

       alert('hey, myVar has changed!');

   });

   $scope.buttonClicked = function() {

      $scope.myVar = 2; // This will trigger $watch expression to kick in

   };

}

There are some other additional angular service $watchCollection and $watchgroup .

Scope.$ watchgroup: it helps us to watch a set of group of variables together , if anyone of them is changed, it will trigger $watchGroup expression.

$watchGroup(watchExpression, listener)

Scope.$watchCollection : it helps us to watch whole object’s properties , we need to pass object instead of each properties of object.

$watchGroup(watchobject, listener)


Other related links : 
AngularJs :$broadcast () , $on() and $emit()

Angularjs : foreach loop

Angularjs : Model or Popup window by ngDialog API