Friday 16 October 2015

Get the data of multiple selected (highlighted) rows in Angular js without check boxes

In this post we are going to see how to get the data of multiple selected highlighted rows in Angular JS with out check boxes.To do this we are creating a directive and place that directive in the ng-repeat directive place element. whenever user select the element, background color changes and also for the deselect of that particular element.

Whenever selecting we are adding a new property to the object named as IsSelected, which is used for check whether element is selected are not. The property IsSelected is automatically created for the each element 

Sample

App

var app = angular.module('app', []);



app.directive('multiSelect'function () {
    return {
        restrict: 'A',
        scope: {
            multiSelect: '='
        },
        link: function (scope, element, cntrl, attrs) {
            element.on('click'function () {

                if (scope.multiSelect.isSelected == undefined || 
                              scope.multiSelect.isSelected == false
                   {
                      scope.multiSelect.isSelected = true;
                      element.css('background''orange');
                   }
                else{
                      scope.multiSelect.isSelected = false;
                      element.css('background''white');
                   }

               
            });


        }
    }
});


app.controller('main'function ($scope, $rootScope) {

    $scope.Title = "Sample Angular Application";


    $scope.roles = [
         { "id": 1, "name""Manager""assignable"true },
         { "id": 2, "name""Developer""assignable"true },
         { "id": 3, "name""Reporter""assignable"true },
         { "id": 4, "name""Programmer""assignable"true },
         { "id": 5, "name""HR""assignable"true }
    ];


    $scope.Delete = function () {
        for (var i = 0; i < $scope.roles.length; i++) {
            if ($scope.roles[i].isSelected == true)
                console.log('Deleted Id ' + $scope.roles[i].id);
        }
    }


});


Html

<html>
<head>
    <script src="scripts/angular.min.js" type="text/javascript"></script>
    <script src="scripts/angular-route.min.js" type="text/javascript"></script>
    <script src="app.js" type="text/javascript"></script>
</head>
<body>
    <div ng-app="app">
        <div ng-controller="main">
            <h1>{{Title}}</h1>

            <ol>
                <li multi-select="item"                                                
                    style="padding:5px;border:solid 1px gray;cursor:pointer;width:500px" 
                    ng-repeat="item in roles">
                    {{item.name}}
                </li>
            </ol>

            <button ng-click="Delete()" style="margin-left:130px">Delete</button>


        </div>
</body>
</html>


After execute the application , you can selected the Rows which want to delete, then click the delete button, where we are print the items Id which are selected in console screen.

Output in Console:




















From this post you can learn how to get the data of multi selected highlighted rows in Angular js with out check boxes.






Sunday 11 October 2015

Flow of $emit and $broadcast events in Angular js

In this post we are going to see the flow of events in $emit and $broadcast events in angular js. Generally $broadcast is used to sent the events from top to bottom of the $scope tree, $emit means sending the events from bottom of the tree to the top.




from the above you can understand how the events are travelling in a scope tree.now we can see the sample now to trigger the events in the scope.

First Let we see about the $broadcast 

var app = angular.module('app', []);

app.controller('main'function ($scope,$rootScope) {

    $scope.Title = "Sample Angular Application";

    $scope.changeName = function (newname, oldname) {

        $scope.$broadcast('RecieveNotify', newname, oldname);

        /* To broadcast to sibling we have to use the $rootScope , because sibling is    
           Comes under a parent scope of current scope, parent scope is now $rootScope          
        */
        $rootScope.$broadcast('RecieveNotify', newname, oldname);

    };


});


Now we are going to create a controller which is maps as sibling to the main controller in DOM

app.controller('sibling'function ($scope) {

    $scope.$on('RecieveNotify'function (evt, newname, oldname) {
        console.log('Sibling : Names changes from ' + oldname + ' to ' + newname);
    });

});


Now we are going to create a controller which is maps as child to the main controller in DOM

app.controller('child'function ($scope) {
    $scope.$on('RecieveNotify'function (evt, newname, oldname) {
        console.log('Child : Names changes from ' + oldname + ' to ' + newname);
    });
});




<html>
<head>
    <script src="scripts/angular.min.js" type="text/javascript"></script>
    <script src="scripts/angular-route.min.js" type="text/javascript"></script>
    <script src="app.js" type="text/javascript"></script>
</head>
<body>
    <div ng-app="app">
        <div ng-controller="main">
            <h1>{{Title}}</h1>
            Old Name : <input type="text" ng-model="OName" />
            New Name :<input type="text" ng-model="NName" />
            <input type="button" ng-click="changeName(NName,OName)" value="Change Name" />

            <div ng-controller="child">
            </div>
        </div>
        <div ng-controller="sibling">
        </div>
    </div>
</body>
</html>


In the above example  main is the main controller which have a separate scope, then passing the child as a inner controller for the main, and sibling is the sibling controller. 

Now in this view we have a two text box  in which we are giving the two values , where it is passed as a parameter to the function called change Name when the button is clicked which is named as "Change Nam"

Here from the main controller, we are broadcasting a method name 'RecieveNotify', from the $scope and $rootScope, why we are broadcast from two different scopes, Because if it is broadcast from $scope, it can traverse to child controller, but not to sibling controller, to broadcast the event to siblings whether we have to broadcast from parent scope or from $rootScope. If we broadcast from $rootScope then it reaches all levels scopes.

Here child method is called twice because we are trigger from a $rootScope and $scope.

Output:
****************
Child : Names changes from Rajesh to Krishna
Child : Names changes from Rajesh to Krishna

Sibling : Names changes from Rajesh to Krishna










Now Let we see about $emit
$emit is an Bottom to Top approach ,i.e from Child to Parent scope.. Let we see the sample now.


app.controller('main'function ($scope, $rootScope) {

    $scope.Title = "Sample Angular Application";

    $scope.changeName = function (newname, oldname) {
        $scope.$broadcast('RecieveNotify', newname, oldname);

        /* To broadcast to sibling we have to use the $rootScope , because sibling is comes 
           under a parent scope of current scope, parent scope is now $rootScope          
        */
        $rootScope.$broadcast('RecieveNotify', newname, oldname);
    };



    $scope.$on('RecievefromChild'function (evt, data) {
        console.log('Parent recieves value from child ' + data);
    });



});



app.controller('child'function ($scope) {
    $scope.$on('RecieveNotify'function (evt, newname, oldname) {
        console.log('Child : Names changes from ' + oldname + ' to ' + newname);
    });


    $scope.CallParent = function (parentvalue) {
        $scope.$emit('RecievefromChild', parentvalue);
    };


});


Parent Value :<input type="text" ng-model="Pvalue" />
<input type="button" ng-click="CallParent(Pvalue)" value="Call Parent" />


OUTPUT:
**************
Parent recieves value from child SDF






From this post you can learn how to $emit and $broadcast events in angular js.