I have selection tag with three options:important,middle important, not so important; and on each selection I want to show only those elements from my table which contains this data.
On the other hand I want to add logic which will tell me that certain tr is show or hide ( I want to add showed materials to array)
Here is my code , how should I implement this logic?
<select id="mySelector" class="styled-select slate" style="width:280px; height:35px">
<option value='important'>აირჩიე</option>
<option value='very important'>very important</option>
<option value='middle important'>middle important</option>
<option value='not so important'>not so important</option>
</select>
//selection code
$(document).ready(function($) {
$('#mySelector').change( function(){
var selection = $(this).val();
$('table')[selection? 'show' : 'hide']();
if (selection) {
$.each($('#myTable tbody tr'), function(index, item) {
$(item)[$(item).is(':contains('+ selection +')')? 'show' : 'hide']();
});
}
});
});
$scope.selectAll = function(){
document.querySelector('#myTable1').style.display = 'block';
for (var i = 0; i < $scope.realJsonArray.length; i++) {
var item = $scope.realJsonArray[i];
console.log(item.id+"id======================");
issync1(item);}
};
<tr id="input1">
<td><input type="checkbox" ng-change="sync(selected[item.id],item)" ng-checked="isChecked(item.id)" name="checkData" ng-model="selected[item.id]" ng-false-value="undefined" /></td>
<td>{{item.id}}</td>
<td>{{item.organizationNameEN}}</td>
<td>{{item.organizationNameGE}}</td>
<td>{{item.priority}}</td>
<td><button class="btn btn-default btn-xs" ng-click="toggle($index)"><span class="glyphicon glyphicon-eye-open"></span></button></td>
</tr>
p.s my table tag id is myTable1
You can use $.toggleClass():
$(function() {
$('input').on('change', function(e) {
$('p').toggleClass('hide', this.checked);
});
});
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type='checkbox'/>Show/Hide</label>
<p>This is para</p>
function which will tell me if row is selected ( if it is selected it
can return true and false in other way for example)
Yes, you can lookup using input checkbox which you have for each row.
Option 1: finding using checkboxes itself
$(function() {
$('button').on('click', function() {
var rows = $('input[name=checkData]:checked').parents('tr');
console.log('checked rows', 0 !== rows.length);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id='input1'>
<td>
<input name="checkData" type='checkbox' />
</td>
</tr>
<tr id='input2'>
<td>
<input name="checkData" type='checkbox' checked='' />
</td>
</tr>
<tr id='input3'>
<td>
<input name="checkData" type='checkbox' />
</td>
</tr>
</table><button>Check</button>
Refer following code may this would meet you requirement !!
<table>
<tr><td></td><td>id</td> <td>name</td> <td>address</td> <td>classA</td> <td>classB</td></tr>
<tr ng-repeat="employee in employees">
<td><input type="checkbox" ng-model="employee.checked" ng-true-value="1" ng-false-value="0"></td>
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
<td>{{employee.address}}</td>
<td><input type="checkbox" ng-model="employee.classA"></td>
<td><input type="checkbox" ng-model="employee.classB"></td>
</tr>
</table>
app.controller('MainCtrl', function($scope) {
$scope.employees = [
{ id:"1", name: "A", address: "A1", classA: true, classB: true },
{ id:"2", name: "B", address: "A2", classA: false, classB: true },
{ id:"3", name: "C", address: "A3", classA: true, classB: false },
{ id:"4", name: "D", address: "A4", classA: false, classB: true },
{ id:"5", name: "E", address: "A5", classA: false, classB: true },
];
$scope.getSelected = function () {
var ar = $scope.employees.filter(
function (value) {
if (value.checked == 1) {
return true;
} else {
return false;
}
}
);
return ar;
};
});
Related
I have a problem where jquery DataTables creates parent and child rows on resize (responsive DataTable) and I need to save values of inputs from child rows as well as from parent rows and post via ajax to controller action.
Responsive (resized) DataTable:
Normal (not resized) DataTable:
Currently I am using this jquery function to post data to the server:
$('#SaveItemButton').click(function (e) {
var arr = [];
var rows = $('#ItemTable').find('tbody').find('tr');
console.log(rows.length);
$.each(rows, function (index, item) {
var controls = $(this).find('input, select');
console.log(controls.length);
item = {
ItemType: controls.eq(0).val(),
Unit: controls.eq(1).val(),
Quantity: controls.eq(2).val(),
Price: controls.eq(3).val(),
InvoiceDate: $('#InvoiceDate').val(),
TransferDate: $('#TransferDate').val(),
TransferPlace: $('#TransferPlace').val(),
InvoiceDescription: $('#InvoiceDescription').val()
};
arr.push(item);
});
$.ajax({
url: '/Item/Add',
data: JSON.stringify(arr),
contentType: 'application/json',
type: "POST",
dataType: "json",
success: function (result) {
//alert(result);
},
error: function (errormessage) {
}
});
return false;
});
but when the Datatable is resized it returns two rows which in turn gets posted to the server.
I am retrieving rows from a table via:
var rows = $('#ItemTable').find('tbody').find('tr');
How can I get all the related parent rows and child rows as one row so I can post that row to the server?
Parent row example:
<tr role="row" class="odd parent">
<td tabindex="0" style=""></td>
<td class="sorting_1"><input name="ItemType" class="form-control" type="text"></td>
<td style="display: none;"><select name="Unit" class="form-control defaultpicker"><option>dan</option><option>Komad</option><option>Sat</option>m<option>m2</option><option>m3</option><option>kg</option><option>lit</option><option>pak</option><option>reč</option></select></td>
<td style="display: none;"><input name="Quantity" class="form-control" type="number"></td>
<td style="display: none;"><input name="Price" class="form-control" type="text"></td>
<td style="display: none;"><input name="Total" class="form-control" type="text" readonly=""></td>
<td style="display: none;"><button type="submit" id="DeleteButton" class="fa fa-times select-row btn btn-secondary btn-sm" data-id=""></button>
</td>
</tr>
Child row example:
<tr class="child">
<td class="child" colspan="2">
<ul data-dtr-index="0" class="dtr-details">
<li data-dtr-index="2" data-dt-row="0" data-dt-column="2">
<span class="dtr-title">Unit</span>
<span class="dtr-data">
<select name="Unit" class="form-control defaultpicker"><option>dan</option><option>Komad</option><option>Sat</option>m<option>m2</option><option>m3</option><option>kg</option><option>lit</option><option>pak</option><option>reč</option></select>
</span>
</li>
<li data-dtr-index="3" data-dt-row="0" data-dt-column="3">
<span class="dtr-title">Quantity</span>
<span class="dtr-data">
<input name="Quantity" class="form-control" type="number" value="3">
</span>
</li>
<li data-dtr-index="4" data-dt-row="0" data-dt-column="4">
<span class="dtr-title">Price</span>
<span class="dtr-data">
<input name="Price" class="form-control" type="text" value="1000">
</span>
</li>
<li data-dtr-index="5" data-dt-row="0" data-dt-column="5">
<span class="dtr-title">Total</span>
<span class="dtr-data">
<input name="Total" class="form-control" type="text" readonly="" value="">
</span>
</li>
<li data-dtr-index="6" data-dt-row="0" data-dt-column="6">
<span class="dtr-title"></span>
<span class="dtr-data">
<button type="submit" id="DeleteButton" class="fa fa-times select-row btn btn-secondary btn-sm" data-id=""></button>
</span>
</li>
</ul>
</td>
</tr>
Controller posted data, index 0 contains valid data:
Code Snippet:
var table = $('#ItemTable').DataTable({
"dom": '<"toolbar">frtip',
"paging": true,
"pagingType": "full_numbers",
"searching": false,
// Solution to responsive table losing data
'columnDefs': [{
'targets': [1, 2, 3, 4, 5, 6],
'render': function(data, type, row, meta) {
if (type === 'display') {
var api = new $.fn.dataTable.Api(meta.settings);
var $el = $('input, select, textarea', api.cell({
row: meta.row,
column: meta.col
}).node());
var $html = $(data).wrap('<div/>').parent();
if ($el.prop('tagName') === 'INPUT') {
$('input', $html).attr('value', $el.val());
if ($el.prop('checked')) {
$('input', $html).attr('checked', 'checked');
}
} else if ($el.prop('tagName') === 'TEXTAREA') {
$('textarea', $html).html($el.val());
} else if ($el.prop('tagName') === 'SELECT') {
$('option:selected', $html).removeAttr('selected');
$('option', $html).filter(function() {
return ($(this).attr('value') === $el.val());
}).attr('selected', 'selected');
}
data = $html.html();
}
return data;
}
}],
'responsive': true,
order: [1, 'asc']
});
// Solution to responsive table losing data
$('#ItemTable tbody').on('keyup change', '.child input, .child select, .child textarea', function(e) {
var $el = $(this);
var rowIdx = $el.closest('ul').data('dtr-index');
var colIdx = $el.closest('li').data('dtr-index');
var cell = table.cell({
row: rowIdx,
column: colIdx
}).node();
$('input, select, textarea', cell).val($el.val());
if ($el.is(':checked')) {
$('input', cell).prop('checked', true);
} else {
$('input', cell).removeProp('checked');
}
});
$('#SaveItemButton').click(function() {
var arr = [];
var rows = $('#ItemTable').find('tbody').find('tr');
console.log(rows.length);
$.each(rows, function(index, item) {
var controls = $(this).find('input, select');
console.log(controls.length);
item = {
ItemType: controls.eq(0).val(),
Unit: controls.eq(1).val(),
Quantity: controls.eq(2).val(),
Price: controls.eq(3).val(),
InvoiceDate: $('#InvoiceDate').val(),
TransferDate: $('#TransferDate').val(),
TransferPlace: $('#TransferPlace').val(),
InvoiceDescription: $('#InvoiceDescription').val()
};
arr.push(item);
});
$.ajax({
url: '/Item/Add',
data: JSON.stringify(arr),
contentType: 'application/json',
type: "POST",
dataType: "json",
success: function(result) {
//alert(result);
},
error: function(errormessage) {
}
});
return false;
});
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css" rel="stylesheet" />
<table id="ItemTable" class="table table-hover table-secondary dataTable no-footer dtr-inline" style="width: 100%;" role="grid" aria-describedby="ItemTable_info">
<thead>
<tr role="row">
<th></th>
<th>ItemType</th>
<th>Unit</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
<th></th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd parent">
<td tabindex="0" style=""></td>
<td class="sorting_1"><input name="ItemType" class="form-control" type="text"></td>
<td style="">
<select name="Unit" class="form-control defaultpicker">
<option>value1</option>
<option>value2</option>
<option>value3</option>
<option>value4</option>
<option>value5</option>
<option>value6</option>
<option>value7</option>
<option>value8</option>
<option>value9</option>
</select>
</td>
<td style=""><input name="Quantity" class="form-control" type="number"></td>
<td style=""><input name="Price" class="form-control" type="text"></td>
<td style=""><input name="Total" class="form-control" type="text" readonly=""></td>
<td style=""><button type="submit" id="DeleteButton" data-id=""></button></td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.6/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
Well, you really cannot. At first DT inject and remove child rows and their content to and from the DOM, making them invisible to simple jQuery selectors. You can target open child rows, but that is all.
Secondly you cannot select multiple elements in pairs. You could have for example $('tr.parent, tr.parent ~ tr.child') or similar, but that would be equal to just $('tr'). I would go through the API:
table.rows().every(function() {
var $node = this.nodes().to$();
var item = {
ItemType: $node.find('input[name=ItemType]').val(),
Unit: $node.find('select[name=Unit]').val(),
Quantity: $node.find('input[name=Quantity]').val(),
Price: $node.find('input[name=Price]').val(),
Total: $node.find('input[name=Total]').val(),
InvoiceDate: $('#InvoiceDate').val(),
TransferDate: $('#TransferDate').val(),
TransferPlace: $('#TransferPlace').val(),
InvoiceDescription: $('#InvoiceDescription').val()
};
arr.push(item)
})
Completely untested. See JQuery Datatables search within input and select on how to update the DT internals when form controls is changing. Otherwise you will just get return default / original values.
Consider I have a list of objects like -
var configs = [{
id: "1",
name: "config1"
},
{
id: "2",
name: "config2"
}
];
I use the following to search through the config list and bind the selected config to another variable called changed_config.
<table style="width:900px;">
<tr>
<th style="width:500px; margin:50px">Config Name</th>
<th style="width:150px;">Config Value</th>
</tr>
<tr ng-repeat="changed_config in changed_configs">
<td>
<input type="text" class="form-control" ng-model="changed_config.id" list="names">
<datalist id="names">
<option ng-repeat="option in configs | filter:search | limitTo:30" ng-value="option.name"> {{option.name}}
</option>
</datalist>
<td>
<input type="text" class="form-control" ng-model="changed_config.value">
</td>
</tr>
</table>
<div class="row">
<button type="button" id="add-reward-grp-btn" ng-click="addConfig()"
class="btn btn-primary">Add Config
</button>
</div>
Controller Code(Not complete code, just relevant snippets):
var app = angular.module("drs_scheduler_app", []);
app.controller("CreateSchedulerJob", function ($scope, $http) {
$scope.changed_configs = [];
$scope.configs = [{
id: "1",
name: "config1"
},
{
id: "2",
name: "config2"
}
];
$scope.addConfig = function () {
var config = {
"id": "",
"value": ""
};
$scope.changed_configs.push(config);
console.log(config);
console.log(JSON.stringify($scope.changed_configs));
}
}
Currently the code displays and binds the name of the selected config to the changed_config variable. But I need the id to be bound to the changed_config variable and the name to be displayed in the html.
If I change the <option> to use id, then id will be displayed.
How do I bind one property to a variable but show another in the html??
Here is the solution you needed,
Procedure:
When an option is selected from datalist I m checking for that
change
That change is observed through input on which datalist is added
On that input change i,e when option is selected I m assigning that
id to id key of respective changed_config
That is inturn displayed in second textbox
It works for dynamic
// Code goes here
function cntryController($scope) {
$scope.LoadSessionData=function(val)
{
console.log(val);
};
$scope.changed_configs = [];
$scope.configs = [{
id: "1",
name: "config1"
},
{
id: "2",
name: "config2"
}
];
$scope.addConfig = function () {
var config = {
"id": "",
"value": ""
};
$scope.changed_configs.push(config);
console.log(config);
console.log(JSON.stringify($scope.changed_configs));
}
$scope.test = function(data, index){
console.log(data)
var newArray = $scope.configs.filter(function (config) {
return config.name == data;
});
console.log(newArray)
if(newArray.length){
var new_changed_config = $scope.changed_configs[index];
new_changed_config.id = newArray[0].id;
}
}
}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<div ng-app="" ng-controller="cntryController">
<table cellspacing="10" cellpadding="10">
<tr>
<th>Config Name</th>
<th>Config Value</th>
</tr>
<tr ng-repeat="changed_config in changed_configs">
<td>
<input type="text" class="form-control" ng-model="changed_config.name" list="names" ng-change="test(changed_config.name, $index)">
<datalist id="names">
<option ng-repeat="option in configs | filter:search | limitTo:30" value={{option.name}}>{{option.name}}
</option>
</datalist>
</td>
<td>
<input type="text" class="form-control" ng-model="changed_config.id"/>
</td>
</tr>
</table>
<div class="row">
<button type="button" id="add-reward-grp-btn" ng-click="addConfig()" class="btn btn-primary">Add Config</button>
</div>
</div>
</html>
Please run the above snippet
Here is a working DEMO
I want to call the controller function from view.
This my view:
<body>
<div ng-app="appTable">
<div ng-controller="Allocation">
<button ng-click="add()"> Add </button>
<button ng-click="remove()">remove</button>
<table>
<th>
<td>Date</td>
<td>Project</td>
<td>Release</td>
<td>Feature</td>
<td>Module name</td>
<td>Hours spent</td>
<td>Comment</td>
</th>
<tr ng-repeat="data in dataList">
<td><input type="checkbox" ng-model="data.isDelete"/></td>
<td>
<input type="text"
datepicker
ng-model="data.date" />
</td>
<td><input type="text" ng-model="data.dept"/></td>
<td>
<select ng-model="data.release" ng-options="x for x in range">
</select>
</td>
<td>
<select ng-model="data.feature" ng-options="x for x in feature">
</select>
</td>
<td>
<input type = "text" ng-model = "data.modulename">
</td>
<td>
<select ng-model="data.hours" ng-options="x for x in hours">
</select>
</td>
<td>
<input type = "text" ng-model = "data.comment">
</td>
</tr>
</table>
<button ng-click="Submit()">Submit</button>
<table>
<tr ng-repeat="data in displayList">
<div ng-controller="Allocation as vm">
<div>{{vm.postdata(data.date)}}</div>
</div>
<p>Output Message : {{msg}}</p>
<p>StatusCode: {{statusval}}</p>
<p>Status: {{statustext}} </p>
<p>Response Headers: {{headers}} </p>
<td>
<p>{{data.date}}</p>
</td>
<td>
<p>{{data.dept}}</p>
</td>
<td>
<p>{{data.release}}</p>
</td>
<td>
<p>{{data.feature}} </p>
</td>
<td>
<p>{{data.modulename}}</p>
</td>
<td>
<p>{{data.hours}}</p>
</td>
<td>
<p>{{data.comment}}</p>
</td>
</td>
</tr>
</table>
</div>
</div>
</body>
This is script.
<script>
var app = angular.module("appTable", []);
app.controller("Allocation", function($scope) {
$scope.hours = ["1", "2", "3"];
$scope.range = ["1", "2", "3"];
$scope.feature = ["UT", "FSDS", "Coding/Devlopment", "QA"];
$scope.dataList = [{
date: '17/07/2016',
dept: 'OneCell',
release: '1',
feature: "UT",
modulename: "Redundancy",
hours: "1",
comment: "Add extra information"
}];
$scope.add = function() {
var data = {};
var size = $scope.dataList.length;
if (!size) {
$scope.dataList = [{
date: '17/07/2016',
dept: 'OneCell',
release: '1',
feature: "UT",
modulename: "Redundancy",
hours: "1",
comment: "Add extra information"
}];
} else {
size = size - 1;
data.date = $scope.dataList[size].date;
data.dept = $scope.dataList[size].dept;
data.release = $scope.dataList[size].release;
data.feature = $scope.dataList[size].feature;
data.modulename = $scope.dataList[size].modulename;
data.hours = $scope.dataList[size].hours;
data.comment = $scope.dataList[size].comment;
$scope.dataList.push(data);
}
};
$scope.Submit = function() {
$scope.test = "Submit is pressed...";
$scope.displayList = [];
angular.forEach($scope.dataList, function(v) {
if (!v.isDelete) {
$scope.displayList.push(v);
}
});
$scope.dataList.splice(0);
};
$scope.remove = function() {
var newDataList = [];
angular.forEach($scope.dataList, function(v) {
if (!v.isDelete) {
newDataList.push(v);
}
});
$scope.dataList = newDataList;
};
$scope.postdata = function(date) {
var data = {
date: date,
};
$http.post('/add_status/', data).then(function(response) {
if (response.data)
$scope.msg = "Post Data Submitted Successfully!";
}, function(response) {
$scope.msg = "Service not Exists";
$scope.statusval = response.status;
$scope.statustext = response.statusText;
$scope.headers = response.headers();
});
};
});
app.directive("datepicker", function() {
function link(scope, element, attrs, controller) {
// CALL THE "datepicker()" METHOD USING THE "element" OBJECT.
element.datepicker({
onSelect: function(dt) {
scope.$apply(function() {
// UPDATE THE VIEW VALUE WITH THE SELECTED DATE.
controller.$setViewValue(dt);
});
},
dateFormat: "dd/mm/yy" // SET THE FORMAT.
});
}
return {
require: 'ngModel',
link: link
};
});
</script>
As you can see in the view I have called the postdata function of the controller.This function internally uses msg variable.But view is not printing value of this variable.I am very new to Aj. Please help.
You need to make following changes:
Remove ng-controller="Allocation as vm", as you already defined controller above., and you not using this syntax in controller.
after you removed as vm, then no need to vm. calls.
you need to inject $http in your controller., to make API call
See this fiddle demo, I logged dummy text in console for each `submit click.
and to make single call on submit, See this Fiddle
You should return a value in the function or add a scope variable to be shown in the controller's div, because right now you are not showing anything.
<div ng-controller="Allocation as vm">
<div>{{vm.postdata(data.date)}}</div>
<p>Output Message : {{msg}}</p>
<p>StatusCode: {{statusval}}</p>
<p>Status: {{statustext}} </p>
<p>Response Headers: {{headers}} </p>
</div>
Anyway, you should not run procedural function in this way. Bind it to an event, ng-click or something.
And do not create other than td or th child elements in tr.
This is the proper html table structure:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
I have the code like this
HTML
<div class="check_toggle" ng-click="toggleAll(payout)">
select all
<input type="checkbox" aria-label="Art" ng-model="checkall"/>
</div>
<table>
<thead>
<tr>
<th>Week</th>
<th>Release Payment</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in payout">
<td>{{item.value}}</td>
<td>
<div class="checkbox pay_check">
<input aria-label="Art" type="checkbox" ng-model="allCheckBox[$index]" ng-click="selectItem(item._id,selected,payout)">
</div>
</td>
</tr>
</tbody>
controller
$scope.payout= [
{'_id':1, value:'Option1'},
{'_id':2, value:'Option2'}
];
$scope.toggleAll = function(payout) {
$scope.checkall = !$scope.checkall;
for(var i=0;i<payout.length;i++){
if($scope.checkall===false){
$rootScope.selected=[];
$scope.allCheckBox[i] = $scope.checkall ;
}else{
$rootScope.selected[i]=payout[i]._id;
$scope.allCheckBox[i] =$scope.checkall ;
}
}
}
$scope.selectItem = function(id, list,payout) {
console.log('id',id);
var idx = list.indexOf(id);
if (idx > -1) {
list.splice(idx, 1);
} else {
list.push(id);
}
if(payout.length==$rootScope.selected.length){
$scope.checkall=true;
console.log($scope.checkall);
// $scope.checkall= $scope.checkall;
console.log('All checkboxes selected');
}
else{
$scope.checkall=false;
console.log('Not All checkboxes selected');
}
}
I have separate checkboxes using ng-repeat, and select all checkbox.First when i select all the individual select boxes, the checkall box will checked automatically as i expected and also check all also select all the individual checkboxes as i expected, but the issue is if i click checkall checkbox first and all individual items next, it will not work as i expected(the checkall checkbox will not be checked or un-checked based on selection).
i tried some stack overflow answers, but it is the same. Could anyone tell me how. please
The main problem here is that you are assigning ng-model to the "checkall" checkbox and a ng-click that calls a function in which you define the value of $scope.checkall again.
You don't need to do that, since ng-model already sets the value of that variable for you.
Check out this fiddle, with the same code you provided, but with the fix:
https://jsfiddle.net/h46rLzhs/5/
angular.module('MyApp',[])
.controller('MyController', function($rootScope, $scope){
$rootScope.selected=[];
$scope.allCheckBox=[];
$scope.payout= [
{'_id':1, value:'Option1'},
{'_id':2, value:'Option2'}
];
$scope.toggleAll = function(payout) {
// Line below is not needed
//$scope.checkall = !$scope.checkall;
for(var i in payout){
if($scope.checkall===false){
$rootScope.selected=[];
$scope.allCheckBox[i] = $scope.checkall ;
}else{
$rootScope.selected[i]=payout[i]._id;
$scope.allCheckBox[i] =$scope.checkall ;
}
}
}
$scope.selectItem = function(id, list,payout) {
console.log('id',id);
var idx = list.indexOf(id);
if (idx > -1) {
list.splice(idx, 1);
} else {
list.push(id);
}
if(payout.length==$rootScope.selected.length){
$scope.checkall=true;
console.log($scope.checkall);
// $scope.checkall= $scope.checkall;
console.log('All checkboxes selected');
}
else{
$scope.checkall=false;
console.log('Not All checkboxes selected');
}
}
})
<div ng-app="MyApp">
<div ng-controller="MyController">
<div ng-click="toggleAll(payout)">
select all
<input type="checkbox" ng-model="checkall"/>
</div>
<table>
<thead>
<tr>
<th>Week</th>
<th>Release Payment</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in payout">
<td>{{item.value}}</td>
<td>
<input type="checkbox" ng-model="allCheckBox[$index]" ng-click="selectItem(item._id,selected,payout)">
</td>
</tr>
</tbody>
</table>
</div>
</div>
I have modified your code to make it working:
$scope.checkall=false;
$scope.allCheckBox=[];
$rootScope.selected = [];
$scope.payout = [{
'_id': 1,
value: 'Option1'
}, {
'_id': 2,
value: 'Option2'
}];
$scope.toggleAll = function() {
$scope.checkall = !$scope.checkall;
$rootScope.selected = [];
$scope.allCheckBox=[];
for (var i = 0; i < $scope.payout.length; i++) {
$scope.allCheckBox.push($scope.checkall);
if ($scope.checkall)
$rootScope.selected.push($scope.payout[i]);
}
}
$scope.selectItem = function(id) {
console.log('id', id);
var idx = $rootScope.selected.indexOf(id);
if (idx > -1) {
$rootScope.selected.splice(idx, 1);
} else {
$rootScope.selected.push(id);
}
if ($scope.payout.length == $rootScope.selected.length) {
$scope.checkall = true;
console.log($scope.checkall);
// $scope.checkall= $scope.checkall;
console.log('All checkboxes selected');
} else {
$scope.checkall = false;
console.log('Not All checkboxes selected');
}
}
html:
<div class="check_toggle" ng-click="toggleAll()">
select all
<input type="checkbox" aria-label="Art" ng-model="checkall" ng-click="toggleAll()"/>
</div>
<table>
<thead>
<tr>
<th>Week</th>
<th>Release Payment</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in payout">
<td>{{item.value}}</td>
<td>
<div class="checkbox pay_check">
<input aria-label="Art" type="checkbox" ng-model="allCheckBox[$index]" ng-click="selectItem(item._id)">
</div>
</td>
</tr>
</tbody>
</table>
Plunk: https://plnkr.co/edit/SmabE9?p=preview
i did'nt read your question but to toggle all check boxes this code will be work.this is example you have to manipulate it.you can have a look here. https://plnkr.co/edit/qD7CABUF9GLoFCb8vDuO?p=preview
var app = angular.module("test", []);
app.controller('testctrl',function($scope){
$scope.options=[
{option:"option1",
selected:false ,
},
{option:"option1",
selected:false ,
},
{option:"option1",
selected:false ,
},
{option:"option1",
selected:false ,
},
{option:"option1",
selected:false ,
},
]
$scope.test=function(event){
if(event.currentTarget.checked==true)
{
var togglestatus=$scope.isAllSelected;
angular.forEach($scope.options,function(object){
object.selected=togglestatus
})
<body ng-app="test" ng-controller="testctrl">
<label>
<input type="checkbox" ng-model="isAllSelected" ng-click="test($event)">SelectAll</label>
<div ng-repeat="option in options">
<input type="checkbox" ng-model="option.selected">checkbox</div>
</body>
}else{
angular.forEach($scope.options,function(object){
object.selected=false
})
}
}
})
This is my html code and I would like to get the data of rows in which checkbox is checked.
HTML
<!DOCTYPE html>
<html>
<body>
<div >
<header>
<h1>
<span>Expand Fed</span>
</h1>
</header>
<h1>
<span>Fed Members </span>
</h1>
<table id="my-table">
<thead>
<tr>
<td>Service Set</td>
<td>Available Devices</td>
<td>Status</td>
<td>Add</td>
</tr>
</thead>
</table>
<footer>
<div>
<input id="so-fedExpand-expand-button" class="button primary" type="submit" value="Expand"/>
Cancel
</div>
</footer>
</div>
</body>
</html>
jQuery
var FedExpandView = (function() {
var EXPAND = '#so-fedExpand-expand-button';
function FedExpandView() {
this.init = function () {
$(EXPAND).on('click', onExpand);
var data = [{ SSet: "Service Set 1", ADevices: '46', Status: "Online"},
{ SSet: "Service Set 2", ADevices: '47', Status: "Online"},
{ SSet: "Service Set 3", ADevices: '48', Status: "Online"}];
$('#my-table').dataTable({
bPaginate : false,
bFilter : false,
bInfo : false,
aaData: data,
aoColumns : [
{mDataProp: 'SSet', id: 'so-fed-ss'},
{mDataProp: 'ADevices', id: 'so-fed-adev'},
{mDataProp: 'Status', id: 'so-fed-status'},
{sDefaultContent: '',
fnRender: function (oObj) {
return '<input type="checkbox" id="so-fed-checkbox" name="select"">';
},
sWidth: '10px', sClass: "icon"}
]
}).rowReordering().
addClass('reorderable');
$('#my-table tbody tr').first().addClass('selected');
this.resume();
}
this.resume = function () {
}
}
return new FedExpandView();
}());
This is how i am getting static data into the table...
can some one help me in getting data of the remaining rows...
Try this example
JS
function checkTable() {
var rowElem;
$('#my-table tr').each(function(idx, elem) {
rowElem = $(elem);
if(rowElem.find('input').is(':checked')) {
console.log('row ' + (idx + 1) + ' is checked');
console.log('data1 is: ' + rowElem.find('.data1').html());
console.log('data2 is: ' + rowElem.find('.data2').html());
}
});
}
HTML
<table id="my-table">
<tr>
<td>
<input type="checkbox">
</td>
<td class="data1">Row1 Data1</td>
<td class="data2">Row1 Data2</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td class="data1">Row2 Data1</td>
<td class="data2">Row2 Data2</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td class="data1">Row3 Data1</td>
<td class="data2">Row3 Data2</td>
</tr>
</table>
<button onclick="checkTable()">Check table</button>
Plunker demo
$("#my-table tbody tr").on('click', function (event) {
serviceSets.length = 0;
var rows = $('table tr td :checkbox:checked').map(function () {
return $(this).val();
}).get();
$( rows ).each(function() {
var that = this;
$( Tabledata ).each(function() {
if(that == this.ssid)
{
serviceSets.push(this);
}
});
});
});