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.