I have an HTML table with checkboxes, the table is generated on the basis of filter values selected in dropdowns
I am trying to fetch the values of checked checkboxes as ids of students then put them in an array "selected" then the elements in this array are added to the hidden input tag one by one. For e.g If I selected a filter called 5th class, the students of 5th class are listed in the table with the checkbox. Now if I checked some students their ids are stored hidden input tag successfully.
var selected = [];
//On click check all records
$(document).on("click", "#completebatch,.commoncheckbox", function() {
selected = $('.commoncheckbox:checked').map((i, el) => {
return $(el).attr('value')
}).get();
$("#allStudentIds").val(selected);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<th><input onclick="checkenabledisable()" id="completebatch" type="checkbox"></th>
</thead>
<tbody>
<tr>
<td><input class="commoncheckbox disabled-check" value="578" type="checkbox" disabled=""></td>
<td>abc</td>
</tr>
<tr>
<td><input class="commoncheckbox" value="357" type="checkbox"></td>
<td>abc</td>
</tr>
<tr>
<td><input class="commoncheckbox" value="123" type="checkbox"></td>
<td>abc</td>
</tr>
</tbody>
</table>
<input type="hidden" value="" id="allStudentIds">
Now lets suppose I have select some students from 6th class. The list of 6th class students will be generated successfully in the table. Now When I wiil check any checkbox, all the previously selected items get vanished (i.e in the above example the ids of 5th class students in hidden input tag gets vanished).
I want that this should not happen. I want to maintain the previously selected ids in hidden input tag.
Try this :
...
var previousIds = $("#allStudentIds").val();
$("#allStudentIds").val(previousIds+selected);
...
If there is a possibility to duplicated id you can remove them before set value to #allStudentIds input
I have created a Plunker with my code showing the issue here:
As you can see when you click on the e.g. 'de' checkbox it toggles show/hide of the table headings - but not the <textarea> values under the column heading, corresponding to the locale ('de' in this case), which is what I am currently trying to get working.
I cant think of a way to link the <textarea> depending on locale.Selected value of the checkbox. So when locale.Locale == res.LocaleID I want to show/hide depending on the locale.Selected value.
<table class="table">
<tr>
<th>Resource Id</th>
<th ng-repeat="locale in view.resourceGridResources.Locales" ng-show="locale.Selected">
{{locale.Locale ? locale.Locale : "invariant" }}
</th>
</tr>
<tr ng-repeat="resource in view.resourceGridResources.Resources">
<td>{{resource.ResourceId}}</td>
<td ng-repeat="res in resource.Resources">
<textarea ng-model="res.Value"
ng-blur="view.saveGridResource(res)"
style="min-width: 300px"
//trying to get to locale.Selected here - how get index 'x'?
ng-show="view.resourceGridResources.Locales[x].Selected">
</textarea>
</td>
</tr>
</table>
Trying to implment something like here - whereby user can click on the check box and it will toggle hide/show table column.
Please note: my demo plunker is just example of issue in my much larger project so I have no control over changing the json format etc.
You don't have to write any function in JS. Since the number of items in resource.Resources is same as the number of items in view.resourceGridResources.Locales.
HTML
<td ng-repeat="res in resource.Resources" ng-show="vm.resourceGridResources.Locales[$index].Selected">
<textarea ng-model="res.Value"
style="min-width: 300px"></textarea>
</td>
Working Plunker: http://plnkr.co/edit/Al4KdHlCV2uo9HQ2qNt7?p=preview
Add this method to your controller:
vm.check = function(res) {
return vm.resourceGridResources.Locales.find(function(loc) {
return loc.Locale === res.LocaleId && loc.Selected;
});
};
Add this condition to your view:
<td ng-repeat="res in resource.Resources" ng-show="vm.check(res)">
A working demo: http://plnkr.co/edit/neQtu8qxQQVP2kDIY5ru?p=preview.
I have a table with 6 rows and 4 columns (the fourth one is a Total: which should be a sum of the above 3 columns). Basically what I want to do is calculate the sum of each column and show the total number in the fourth column. My table is generated using ng-repeat.
Something like:
<table>
<thead>
<tr>
<th ng-repeat="item in items">{{item}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>Input1:</td>
<td ng-repeat="collection in collections">
<input type="text" ng-model="collection.row1">
</td>
</tr>
<tr>
<td>Input2:</td>
<td ng-repeat="collection in collections">
<input type="text" ng-model="collection.row2">
</td>
</tr>
<tr>
<td>Input3:</td>
<td ng-repeat="collection in collections">
<input type="text" ng-model="collection.row3">
</td>
</tr>
<tr>
<td>Sum:</td>
<td ng-repeat="collection in collections" ng-model="collection.total">
{{collection.total}}
</td>
</tr>
</tbody>
</table>
"collections" from ng-repeat would be an array with 6 objects which I'm getting from an API using a GET method and storing my data in a $scope.
"Total" row with ng-model is coming from backend with the calculus already done but I need a way to show it on client as it is updating dynamically.
I've tried $watch and $watchCollection and also ng-change but I can't find a way to make it work. In my controller I used a for to go through my array of objects and tried to sum every [i] position but that didn't work.
Is there another solution for my issue?
Here is what I tried in my controller:
$scope.collections = [];
$scope.getTotal = function(){
var total = 0;
for(var i = 0; i < $scope.collections[i].length; i++){
var myItems= $scope.collections[i];
total = (myItems.row1+ myItems.row2+ myItems.row3);
}
return total;
};
Thank you.
Why not simply do it in the template?
<td>{{collection.row1 + collection.row2 + collection.row3}}</td>
Also, there should not be an ng-model unless it is an <input>. That's probably where your main error is. Ng-model will try to set the value inside the <td>'s, and so the angular template ({{X}}) and ng-model are competing for the display value inside the <td></td> in your code given
If you calculate the total in the back-end
$scope.CalculatedTotal = Some Value;
so you can call in the last row:
<td>Sum:</td>
<td ng-repeat="collection in collections" ng-model="collection.total">
{{CalculatedTotal}}
</td>
or store the CalculatedTotal in to the object
currentCollection.Total = CalculatedTotal;
something like that
I need one help i need to display data inside table using Angular.js.I am explaining my code below.
$scope.listOfData=[
{
{'date':'2016-01-25 18:14:00','name':'raj','email':'raj#gmail.com','order_status':1,'order_id':1111},
{'date':'2016-02-04 11:26:05','name':'raj','email':'raj#gmail.com','order_status':0,'order_id':2222}
},
{
{'date':'2016-01-23 13:15:59','name':'rahul','email':'rahul#gmail.com','order_status':1,'order_id':3333},
{'date':'2016-01-25 18:14:00','name':'rahul','email':'rahul#gmail.com','order_status':0,'order_id':4444}
}
]
my html table is given below.
<div class="table-responsive dashboard-demo-table">
<table class="table table-bordered table-striped table-hover" id="dataTable" >
<tbody>
<tr>
<td rowspan="2">Date</td>
<td rowspan="2">Name</td>
<td rowspan="2">Email</td>
<td colspan="7">Order</td>
</tr>
<tr>
<td>Order Id</td>
<td>Order status</td>
</tr>
<tr>
<td>date</td>
<td>name</td>
<td>email</td>
<td>orderid</td>
<td>orderstatus</td>
</tr>
</tbody>
</table>
</div>
expected output result.
date name email order
order_id order_status
2016-01-25 raj raj#gmail.com 1111 1
to 2016-02-04 2222 0
The above table is for serial no-1 again for sl no-2 the data will display accordingly.
Here i need suppose 0th index of $scope.listOfData has two set of data some field value like name,email are same so these two sate of data will join and it will display in 1st index of the table.Here date column will contain lower date to higher date like(from date to todate),name and email filed will contain the value one but here different is for order column order_id and order_status is different for each set of data of 0th index from $scope.listOfData so these will again move in a another loop.Please help me.
The following may help you
<div ng-repeat="data in listOfData">
<!--<Do whatever you need here with data.name, data.date etc...>-->
<!--You can keep your table here.-->
</div>
<tr ng-repeat="data in listOfData">
<td>{{data.date}}</td><td>{{data.name}}</td>....
</tr>
PS for header you can use a <thead> tag
Edit :
{
{'date':'2016-01-25 18:14:00','name':'raj','email':'raj#gmail.com','order_status':1,'order_id':1111},
{'date':'2016-02-04 11:26:05','name':'raj','email':'raj#gmail.com','order_status':0,'order_id':2222}
}
You can't with your json format like this, flatten it in a one level array with even index containing "from" and odd containing "to" datas then do the following
<tr ng-repeat="data in listOfData">
<td ng-if="$index %2==0">{{data.date}}</td>
<td ng-if="$index %2==1">To {{data.date}}</td>
...
</tr>
EDIT : can't really make a plunker, here is what by flatten I mean transform this
$scope.listOfData=[
[
{'date':'2016-01-25 18:14:00','name':'raj','email':'raj#gmail.com','order_status':1,'order_id':1111},
{'date':'2016-02-04 11:26:05','name':'raj','email':'raj#gmail.com','order_status':0,'order_id':2222}
},
{
{'date':'2016-01-23 13:15:59','name':'rahul','email':'rahul#gmail.com','order_status':1,'order_id':3333},
{'date':'2016-01-25 18:14:00','name':'rahul','email':'rahul#gmail.com','order_status':0,'order_id':4444}
]
]
Into this :
$scope.listOfData=[
{'date':'2016-01-25 18:14:00','name':'raj','email':'raj#gmail.com','order_status':1,'order_id':1111},
{'date':'2016-02-04 11:26:05','name':'raj','email':'raj#gmail.com','order_status':0,'order_id':2222},
{'date':'2016-01-23 13:15:59','name':'rahul','email':'rahul#gmail.com','order_status':1,'order_id':3333},
{'date':'2016-01-25 18:14:00','name':'rahul','email':'rahul#gmail.com','order_status':0,'order_id':4444}
}
]
So your "from" lines will have even index (0,2,4...) and your "to" lines will have the odds ones (1,3,5,...).
Using $index you can now built properly your lines : $index is given by ng-repeat. ng-if is a directive that won't build the dom element if the condition is not true.
So this
<td ng-if="$index %2==0">{{data.date}}</td>
<td ng-if="$index %2==1">To {{data.date}}</td>
Will always build only one <td> element.
I have a table which has a dropdown above each column where the number of columns is dynamic. I created this as follows
<table class='table' >
<tr>
<th ng-repeat= "item in importTable[0]">
<select ng-model="selectedItem" ng-options="i.Name for i in optionList"></select>
</th>
</tr>
<tr ng-repeat="row in importTable">
<td ng-repeat="item in row">{{ item }} </td>
</tr>
</table>
Where optionList is the list of options in the dropdowns. All of the dropdowns have the same optionList.
How do I add the selected item along with the index of the column it is above to the scope to the model?
Here is a link to JSfiddle http://jsfiddle.net/U3pVM/769/ just click import. I want to be able to define which column is which type.
You may use $index variable that is provided by ngRepeat to set the ngModel to a specific item in an array:
In your controller you first define the array that will hold all the models:
function ImportCtrl($scope) {
$scope.selectedItems = [];
...
}
And than, inside the ngRepeat you refer your ngModel to a specific item inside the selectedItemsarray:
<select ng-model="selectedItems[$index]" ng-options="i.Name for i in columnNames"></select>
Demo FIDDLE