Add clickable element within a clickable table row - javascript

Let's say I have a table row with a clickable element in it:
<tr ng-repeat="product in products" onclick="showProductDetail()">
<td>{{product.id}}</td>
<td>{{product.title}}</td>
<td>{{product.price}}</td>
<td>
<switch id="enabled" name="enabled" ng-model="product.enabled" ng-change="enableProduct()"></switch>
</td>
</tr>
I'm using Angular UI Switch but the issue would be the same for any clickable element.
How do I make the row clickable but isolate the behavior of the switch? Currently it tries to do both, resulting in wonky behavior. I know I could just make each cell except that last one clickable, but is there a cleaner way?

If Dmitry's answer does not work.
Try calling the ng-change with enableProduct($event)
And within that function, call
function enableProduct($event) {
$event.stopPropagation();
...
}

I believe the <switch> handler should stop the event propagation. Try to return false from you ng-change handler. E.g.
ng-change="enableProduct(); return false"

Related

Jquery Datatables.net : After sorting the table, odd times, the listeners don't work

I'm working with tables from datatables.net and i have an issue, very tricky to solve and i need ideas from everybody. So this is my table
I apply an event handler to every checkbox that i have in every row
my event handler is
function checkListagem() {
$('input:checkbox.checkboxinput').on('click',function (e) {
this.checked ? listagensParaCartas.push($(this).attr('id')) : listagensParaCartas.pop($(this).attr('id'));
var tem = $(this).parents("tr").hasClass("selecionada");
if (!tem) {
$(this).parents("tr").addClass("selecionada");
}
else {
$(this).parents("tr").removeClass("selecionada");
}
});
}
i also tried
$('"#listagens input:checkbox').on('click','.checkboxinput', function (e)
where listagens is the id of the datatable. When i click in the checkbox this aplly the name class "selecionada". example in this case i have
<tr class="odd selecionada>...</tr>
<tr class="even>...</tr>
<tr class="odd>...</tr>
but when i sort by the columns "Listagem" "Data Criação" or orther, they dont always apply the class to that tr. but is i replace for example this
$(this).parents("tr").addClass("selecionada");
for this
$(this).parents("tr").css("color","red");
the event handler works with the css but not with the addclass, or removeClass.
BUT if i click again sometimes work, sometimes dont. i think if i click sorting even times in the same column it goes back to work right, but when is odd times, does apply the class.
For now i'm going to disable the sorting, more important is having the selected, or in portuguese "selecionada", but i really need some really good idea. Thank you in advance.

How to mark multiple elements without clicking in angular?

I have the following code:
<table>
<tr ng-repeat="minute in hour.minutes track by $index">
<td class="{{minute.class}}" ng-mousedown="setTdCol(hour, minute)" > </td>
</tr>
</table>
setTdCol just changes minute.class causing the cell to change its background color.
My goal is to allow the user to mark multiple cells by pushing the mouse button once and then moving above the cells.
That is why I used ng-mousedown instead of ng-click, but still I have to release the mouse and click each column. What has to be changed?
Try to build your logic together with ng-mouseover and ng-mouseup.
For example you can set a boolean variable mouseDown to true with ng-mousedown and set it to false with ng-mouseup. That way in your ng-mouseover function you can check if the mouse is down or up and mark the elements you go over. You can for example store them in an array and if the element exists in that array on hover - remove it. Or set them to active / inactive with boolean ... etc.
Hope that helps you :)
You want to know when the mouse is down on the table and when it is, which minutes its hovering above. You can set a flag to indicate if the mouse is down on the table that will vary when the table's ng-mouseup and ng-mousedown are invoked, and give an ng-mouseover function to each cell that will check if this flag is true.
<table ng-mousedown="isDown = true" ng-mouseup="isDown = false">
<tr ng-repeat="minute in hour.minutes track by $index">
<td ng-style="minute.class" ng-mouseover='setTdCol(hour, minute)'>aaa</td>
</tr>
</table>
In the example above, isDown is the flag. Now you just need to wrap setTdCol function in an if that checks if is down is true. just don't forget to initialize $scope.isDown in the controller
...
$scope.isDown = false;
$scope.setTdCol = function(hour, minute) {
if($scope.isDown) {
...
}
};
...

alternating class in ng-repeat using scope var without binding

I have a nested ng-repeat on a table. It is an accordion table with child rows for each parent row. In order to accomplish this I created a <tbody> for each parent item, placing the parent row in a <tr> and then using ng-repeat to add all the child rows. Due to the multiple <tbody> elements the zebra striping on the table gets thrown off. Another wrinkle is that the table has the ability to collapse/expand child rows and I need the striping to be correct for whichever rows are visible. So I am trying to manually add striping classes. I'm using Angular's ng-init to toggle a scope variable, and then using ng-class to apply it. The problem is that it appears to be bound to the final state of the variable rather than what it was as the iterator was rendering the row.
HTML:
<tbody ng-repeat="parentRow in myData" ng-init="changeRowClass($even)">
<tr ng-class="{'industry-payments-even-row':industryRowEven,'industry-payments-odd-row':!industryRowEven}">
<td>{{parentRow.industryCode}} - {{parentRow.industryCodeDescription}}</td>
<td class="numeric">{{parentRow.ValueOneSum}}</td>
<td class="numeric">{{parentRow.ValueTwoSum}}</td>
</tr>
<tr ng-repeat="childRow in parentRow.childIndustries" ng-init="changeRowClass($even)" ng-class="{'industry-payments-even-row':industryRowEven,'industry-payments-odd-row':!industryRowEven}">
<td>{{childRow.industryCode}} - {{childRow.industryCodeDescription}}</td>
<td class="numeric">{{childRow.ValueOne}}</td>
<td class="numeric">{{childRow.ValueTwo}}</td>
</tr>
</tbody>
Controller code:
$scope.industryRowEven = false;
$scope.changeRowClass = function(isEven) {
$scope.industryRowEven = isEven;
};
I need each iteration (of parent OR child) to reverse the class for the next one (I'm leaving out the issue of if the child is visible or not for now to keep this more simple). I can see in the debugger that the variable is getting toggled properly on each iteration. The problem is that the ng-class seems to be bound to the current state in scope so when it is true it would apply one class, but then next time it is false and switches the class for all of them.
I need it to just print the class according to the variable state at the time it renders that row, and then ignore the variable unless the ng-repeat is started over (like for sorting or toggling visibility, etc.)
Is there a way to stop the binding?
AngularJS has this build in with directives called ngClassOdd and ngClassEven.
They work just like ngClass, but only on odd/even items inside an ngRepeat.

Toggle with ! operator not working on page load JavaScript

I have an onClick (using angular.js ng-click) where i have to toggle color of a table row with on click.
This is the initial implementation.
<tr>
<td ng-class="{'setType': types.isTypeSet('TYPE') == true}" ng-click="types.setType('TYPE')">
<img class="typebox-img" src="">
<div class="typebox">TYPE</div>
</td>
</tr>
where 'type' is the type of table row and 'types' is the angular controller.
types.setType(type):
...
this.types[type] = ! this.types[type];
...
while this toggles values from the second click on, it doesnt change the value on the first click.
I implemented the functionality using the if-else statement, but cant figure out why this wont work as it is a pretty basic thing to do.
this.types[type] is set to false as default.
Could someone explain why is this happening..
It doesn't surprise me that this doesn't work:
ng-click='types.setType('type')
Use " for the inner quotes to make the parser understand what you're trying to do (or the other way around):
ng-click='types.setType("type")'
Incidentally, you don't need a function to do this. Just initialize in your controller a bool:
$scope.toggle = true
And use in your view like this:
ng-click='toggle = !toggle'

How to hightlight non editable backgrid cells?

I am using backbone and backgrid.
I want to make some backgrid cells non editable and highlight them.
And i am looking for a simple css property over those cells.
But unfortunately backgrid does not impose any specific class to the non editable cells.
This is the rendered one backgrid row itself from backgrid website : http://backgridjs.com/ and we know id field is non editable here :
<tr>
<td class="integer-cell">1</td>
<td class="string-cell">Afghanistan</td>
<td class="integer-cell">25,500,100</td>
<td class="number-cell">0.36</td>
<td class="date-cell">2013-01-01</td>
<td class="uri-cell"><a tabindex="-1" href="http://en.wikipedia.org/wiki/Afghanistan" title="http://en.wikipedia.org/wiki/Afghanistan" target="_blank">http://en.wikipedia.org/wiki/Afghanistan</a></td>
</tr>
Now how do i achieve the same??
Those cells which you dont want to make editable, add some class to them and then go to source code of backgrid.js and find the function which enabled the editmode, I dont know exactly which function handling that, may be
render: function () {
enterEditMode: function () {
and then check the class name for that cell like
$("#mydiv").hasClass("dont_edit"); OR this.hasClass("dont_edit");
if so then just "return" otherwise allow editing. You have to solve it by trial and error basis, until someone helps you with exact code. Better start helping yourself till then.
Backgrid.Cell#initialize has the following code
if (Backgrid.callByNeed(column.editable(), column, model)) $el.addClass("editable");
This means that all editable cells have "editable" css class. wherease all non-editable cells do not have this class.
So, by applying CSS selector like the one below I was able to style non-editable cells as I wanted:
backgrid td.renderable:not(.editable) {
background-color: gray
}

Categories

Resources