Sunday, 5 June 2016

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.



 

No comments:

Post a Comment