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
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.
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>
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.
Hi Rajesh .. Thanks for the above post. One more thing I need to create multilevel drop down with check boxes. For ex. If I click on main categories it should open sub categories in dropdown with check boxes and again same for sub categories. I tried my own directive but its not getting. Can you plz help me. Thank you
ReplyDelete