How to make an ng-click event conditional? - javascript

I have this code inside ng-repeat:
Do something
How to make a condition that the button is disabled when it has class="disabled"?
Or is there a way to do it in Javascript so that will look like:
$('.do-something-button').click(function(){
if (!$(this).hasClass('disabled')) {
do something
}
});

It is not good to manipulate with DOM (including checking of attributes) in any place except directives. You can add into scope some value indicating if link should be disabled.
But other problem is that ngDisabled does not work on anything except form controls, so you can't use it with <a>, but you can use it with <button> and style it as link.
Another way is to use lazy evaluation of expressions like isDisabled || action() so action wouold not be called if isDisabled is true.
Here goes both solutions: http://plnkr.co/edit/5d5R5KfD4PCE8vS3OSSx?p=preview

We can add ng-click event conditionally without using disabled class.
HTML:
<div ng-repeat="object in objects">
<span ng-click="!object.status && disableIt(object)">{{object.value}}</span>
</div>

I use the && expression which works perfectly for me.
For example,
<button ng-model="vm.slideOneValid" ng-disabled="!vm.slideOneValid" ng-click="vm.slideOneValid && vm.nextSlide()" class="btn btn-light-green btn-medium pull-right">Next</button>
If vm.slideOneValid is false, the second part of the expression is not fired. I know this is putting logic into the DOM, but it's a quick a dirty way to get ng-disabled and ng-click to place nice.
Just remember to add ng-model to the element to make ng-disabled work.

Basically ng-click first checks the isDisabled and based on its value it will decide whether the function should be called or not.
<span ng-click="(isDisabled) || clicked()">Do something</span>
OR read it as
<span ng-click="(if this value is true function clicked won't be called. and if it's false the clicked will be called) || clicked()">Do something</span>

You could try to use ng-class.
Here is my simple example:
http://plnkr.co/edit/wS3QkQ5dvHNdc6Lb8ZSF?p=preview
<div ng-repeat="object in objects">
<span ng-class="{'disabled': object.status}" ng-click="disableIt(object)">
{{object.value}}
</span>
</div>
The status is a custom attribute of object, you could name it whatever you want.
The disabled in ng-class is a CSS class name, the object.status should be true or false
You could change every object's status in function disableIt.
In your Controller, you could do this:
$scope.disableIt = function(obj) {
obj.status = !obj.status
}

I had this issue also and I simply found out that if you simply remove the "#" the issue goes off. Like this :
Do something

Related

How to identify html elements that don't have a special id with jquery or otherwise?

I have a div filled with spans that don't have an id on them, and need to be able to determine if one of those spans is marked(highlighted). My approach at first was the following:
function isSelected(element){
var selectedElement = window.getSelection().anchorNode.parentNode;
if($(selectedElement).index() === $(element).index()){
// It's selected
}
}
But this solution doesn't consider cases where other elements from another div are selected that have the same index.
I tried comparing the element objects like this:
$(selectedElement).get() == $(element).get()
and like this:
$(selectedElement) == $(element)
but the comparison was always returning false.
How do I determine if they're the same without giving every span an id?
Solution:
if(selectedElement.isEqualNode(element){
}
if(selectedElement.isEqualNode(element){
}
Try to use this code:
if ($('div span .highlighted')){
alert ('span is highlighted');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div>
<span class="highlighted"></span>
<span class="normal"></span>
</div>
</div>
This thread is discussing a topic related to your situation Object comparison in JavaScript
Maybe one of their suggestions helps you. Unfortunately Javascript does not provide anything like .ReferenceEquals() like for example C# does.

Pass variable with set value to a function in JavaScript

I have a little span element which I CSSed the f*** out of so that it appears as a switch. It kind of like this:
<Span class="switchbody" value="on"><span class="switchcover">on</span></span>
I wanted to know, if I added an onclick="editswitch()" to the first span element, would it be possible if I passed a Variable containing a unique value so that the JavaScript function knows which switch I am talking about without me having to write a million functions doing exactly the same thing to different elements?
If it is possible, how would I do that
PS I have tried
<span onclick="getId = "switch one";">
If it is possible, no jquery or php, etc. Just JavaScript.
Use this to refer to the object that fired the event. For example:
function editswitch(me) {
alert(me.id);
}
<span id="span1" onclick="editswitch(this)">I'm the first span</span>
<br/>
<span id="span2" onclick="editswitch(this)">I'm the second span</span>

trigger click an element with a specific class and attribute

I have few link elements related to a certain class and assigned row attributes to it and I'm trying to trigger click event based on the attribute value.
<a class="manage_edit_nb" nb_id="1"></a> | <a class="manage_del_nb" nb_id="1"></a>
<a class="manage_edit_nb" nb_id="2"></a> | <a class="manage_del_nb" nb_id="2"></a>
<a class="manage_edit_nb" nb_id="3"></a> | <a class="manage_del_nb" nb_id="3"></a>...
Is it possible to trigger click or any event for a certain attribute value for a certain class?
If I try something similar to
$('a[nb_id = "1"]').trigger('click');
it triggers click event for all elements irrespective of class but I failed to figure out how to put class reference in there!
First, the nb_id is not a valid attribute, use data-id instead. data-* attributes are allowed, and I personally like them. And, they can be accessed using $.attr('data-id') method, and their value can bee updated using $.attr('data-id', 'new value'). Going back to the question, try using below selector
$('.manage_del_nb[data-id="1"]').get(0).click();
OR
$('.manage_edit_nb[data-id="1"]').get(0).click();
Why .get(0)? Assuming that the element has been bound with .click(callback()) or .on('click'), the .trigger('click') will not do anything, so I am using .get(0) to get the DOM object which has that method to simulate the click event. Regardless of being said, you can use trigger('click') the way you're already using
This should work fine.
$('a.manage_edit_nb[nb_id="1"]').trigger('click');
here it is working:
https://jsfiddle.net/link2twenty/g0txnzfw/
The thing that you are trying to do by the above code is triggering a click event on both '.manage_edit_nb' and '.manage_del_nb' selector and hence the event is occuring on both. Try to be little more specific by giving the class name like
$('a.manage_edit_nb[nb_id = "1"]').trigger('click');
I think this is exactly what you need : First of all, change all nb_id to data-nb_id. and use the following code, needs jquery.
$(document).ready(function() {
// Handle click event on the class required
$('.manage_edit_nb').click(function(){
// Get nb_id of that particular anchor event of the class
var nb_id= $(this).attr('data-nb_id');
// Switch on nb_id
switch(nb_id){
// Handle your cases separately here
case "1":
alert('Case 1');break;
case "2":
alert('Case 2');break;
case "3":
alert('Case 3');break;
}
});
});

set event function trigger in looping with jquery

I would like to ask something about set event trigger with jquery.
First of all, i have a form with many buttons ( btnadd1 , btnadd2, btnadd3 , ... )
I have this code:
for(i=1;i=<3;i++){
$('.btnAdd'+i).click(function(){
alert(i);
});
}
The code should be alert(1) when i click btnadd1 , alert(2) when i click btnadd2,
but the problem is when i click btnadd1, btnadd2, or btnadd3 it alerts "3"
My assumption is that the function overwrites the previous function. Does anyone have a solution for this problem?
This is a common closure issue. You can work around it like this:
$('.btnAdd'+i).click(function(idx){
return function(){alert(idx);};
}(i));
JSFIDDLE
The issue deals with closure inside loop.
Better you could use a user defined attribute in your button and use a single classs for binding the event. see #bipen's answer.
<button class= "someclass" data-value="1"> click</button>
<button class= "someclass" data-value="2">click </button>
$('.someclass').click(function(){
alert($(this).attr('data-value'));
});
Check Fiddle
http://jsfiddle.net/hoja/3jt5furd/5/
Avoid using closure inside a loop...better is to assign a single class to all the buttons and register single event for that..make use of data attributes.
$('.someclass').click(function() {
alert($(this).data('value')); //using jquery's data function
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="someclass" data-value="1">
button1
</button>
<button class="someclass" data-value="2">
button2
</button>
there are other solution to achieve what you want, using attribute selector [class^="btnadd"] and so on but i think this solution is better and readable.

Set a parents parent css using javascript/ knockout

I've got some checkboxes within a table and I want to the css of their parent to be dependent upon whether it's checkbox is checked or not. I can't seem to get this to work and was hoping you could point me in the right direction.
At the moment, I've got a setCss() function on the checkbox 'onclick' method but am getting the resource undefined error.
I've added jsFiddle
function setCss() {
if (this.checked)
$(this).closest('td').className = "selected";
else
$(this).closest('td').className = "deselected";
}
You can do this quite simply using the knockout css binding:
<td data-bind="css: {'selected': selected,'deselected': !selected() }">
<!-- existing content -->
</td>
I've updated your fiddle to work in this way.
This binding means "set the 'selected' class if selected() evaluates to a truthy value, and set the 'deselected' class if it evaluates to falsey".
You could also neaten up your CSS by using a :not(selected) instead of an explicit deselected class

Categories