Develop Reference

Run Function when Css class changes

I want to change the bordercolor of the next HTML-Element when my input is "dirty" and "valid".
HTML:
<input type="text" class="form-control" id="exampleId" formControlName="exampleId"
[ngClass]="{ 'is-valid': Form.get('exampleId')?.valid && vvtForm.get('exampleId')?.dirty) }"
(onKeyUp)="changeBorderColorOnValidation('exampleId')">
JavaScript:
changeBorderColorOnValidation(id) {
if (this.Form.get(id).valid) {
(document.querySelector('#' + id).nextSibling as HTMLElement).style.borderColor = '#28a745';
}
}
So far, this works, when you type something in the textarea the (onKeyUp) validates if the textarea is empty or not and changes the bordercolor.
I want to have something cleaner like [ngRun]="functionToRun() | functionThatMustBeTrue".
Here:
[ngRun]="changeBorderColorOnValidation('exampleId') | Form.get('exampleId')?.valid && vvtForm.get('exampleId')?.dirty)
Does something like this exist?

Use the Adjacent sibling combinator and Angular's status classes:
.ng-invalid.ng-dirty + * {
border-color: #28a745
}

If I understand your question well, then what you want to do is already handled by angular. You just need to ad the .ng-dirty class to your css. See example below and check the link to angular doc below for details.
[https://angular.io/guide/form-validation#control-status-css-classes][1]
Html:
<input type="text" class="form-control" id="exampleId" formControlName="exampleId"(onKeyUp)="changeBorderColorOnValidation('exampleId')">
Css:
.form-control .ng-invalid .ng-dirty {
border-color: red;
}

AngularJS ng-repeat get the index of the button clicked and used in jquery

I got some code here, what I want to do is when I click the button I change the checkbox value and at the same time change the color of the button.
(check=red,uncheck=black for example)
I think it is easier to do it with jquery. My idea is to get the index of which button is clicked. change the value of the checkbox with the same index and the button color.
But I just cannot figure out how to select the button and the checkbox.
<div id="allcolrepeat">
<div style="width:200px; float:left; margin:5px;" ng-repeat="col in allColumns">
<input class="colCheckbox" type="checkbox" ng-change="changeCheck(col.displayName)" ng-model="checkvalue[col.displayName]">
<button>{{col.displayName}}</button>
</div>
</div>
Any help will be appreciated. Thanks.

You can use ngClass directive
The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.
Code
<button ng-class="checkvalue[col.displayName] == true ? 'red' : 'black'">{{col.displayName}}</button>
Another way of using it is
ng-class="{'red': checkvalue[col.displayName], 'black': !checkvalue[col.displayName]}">
Note: Declare red and black css class

If I understood well here is a simple JSFiddle
You can do it with many ways, you can use ngClass or ngStyle (second one in the example) to change CSS styling, then you need only to assign the scope variable to the ng-model to change the checkbox value.
HTML:
<div ng-app="myApp" ng-controller="myCtrl">
<div id="allcolrepeat">
<div style="width:200px; float:left; margin:5px;" ng-repeat="col in allColumns">
<input class="colCheckbox" type="checkbox" ng-model="col.displayName">
<button ng-style="{'background-color': color}" ng-click="col.displayName = 'CHANGED'; color = 'red'">{{col.displayName}}</button>
</div>
</div>
</div>
JS:
angular.module('myApp', [])
.controller('myCtrl', ['$scope', '$filter', function ($scope, $filter) {
$scope.allColumns = [{displayName: 'hello'}, {displayName: 'world'}];
$scope.color = 'transparent';
}]);

Here I'm using ng-style to change the button color :
ng-style="{background : status[$index] ? 'red' : 'blue'}"
But you can also use :
ng-class="status[$index] === true ? 'red' : 'blue'"
function Main($scope) {
$scope.allColumns = [{displayName : "1"},{displayName : "2"},{displayName : "3"},{displayName : "4"},{displayName : "5"},{displayName : "6"},{displayName : "7"}]
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="Main" id="allcolrepeat">
<div style="width:200px; float:left; margin:5px;" ng-repeat="col in allColumns track by $index">
<label>{{col.displayName}}</label>
<input ng-model="status[$index]" type="checkbox">
<button ng-style="{background : status[$index] ? 'red' : 'blue'}" ng-click="status[$index] = !status[$index]">OK</button>
</div>
</div>

As was mentioned in other answers it is better to use ng-style or ng-class for styling purposes.
But question was made and peoples from google-search will come to see how to get index with jQuery... So inside ng-repeat you can use '$index' (ngRepeat documentation) variable so you can use it as data attribute or whatever you want. In your particular case you can make
<div ng-repeat="item in items">
<button data-index={{$index}}>{{item}}</button>
</div>
And with jQuery make $('button').on('click', function() { $(this}.data('index') });

Multiple condition in .each jQuery

Here is my HTML
<span class="sp-right">
<label>Name:</label>
</span>
<span class="sp-left">
<select name="omoor" required>
<option value="" style="display:none">something</option>
</select>
</span>
I want to change sp-rightclass to sp-left class and sp-left to sp-right with toggle .
here is my jquery :
$(".sp-right").each(function(){
$(this).removeClass("sp-right").addClass("sp-left");
});
it's working only once and for 1 element ?
Any idea ?
Thanks

As simple as one line with toggleClass:
$('.sp-right, .sp-left').toggleClass("sp-right sp-left");
No need to check for classes and remove/addClass manually, as toggleClass does exactly this. You can also provide multiple space separated classes to toggle.

Check the current classname inside the function.
$(".sp-left, .sp-right").each(function(){
var el = $(this);
if (el.hasClass('sp-left')) {
el.removeClass("sp-left").addClass("sp-right");
} else {
el.removeClass("sp-right").addClass("sp-left");
}
});

jquery to change style attribute of a div class

I have a slider class like this and I wan to change the style attribute style="left: 336px"
<div id="range-cont">
<div class="slider">
<div class="progress" style="width: 350px;"></div>
<a class="handle" href="#" **style="left: 336px;"**></a>
</div>
<input id="percentage" class="range" type="range" value="14" name="percentage" min="0" max="100">
<p id="percent-label">%</p>
</div>
</div>
I tried
$('.handle').css({'style':'left: 300px'}) but its not working.
Not sure what I am doing wrong here

Just try $('.handle').css('left', '300px');

if you just want to set the style attribute use
$('.handle').attr('style','left: 300px');
Or you can use css method of jQuery to set only one css style property
$('.handle').css('left', '300px');
OR same as key value
$('.handle').css({'left': '300px', position});
More info on W3schools

$('.handle').css('left', '300px');
$('.handle').css({
left : '300px'
});
$('.handle').attr('style', 'left : 300px');
or use OrnaJS

Try with
$('.handle').css({'left': '300px'});
Or
$('.handle').css('left', '300px');
Instead of
$('.handle').css({'style':'left: 300px'})

$('.handle').css('left','300px') try this, identificator first then the value
more on this here:
http://api.jquery.com/css/

this helpful for you..
$('.handle').css('left', '300px');

Style is an attribute so css won't work for it.U can use attr
Change:
$('.handle').css({'style':'left: 300px'});
T0:
$('.handle').attr('style','left: 300px');//Use `,` Comma instead of `:` colon

You can't use
$('#Id').attr('style',' color:red');
and
$('#Id').css('padding-left','20%');at the same time.
You can either use attr or css but both only works when they are used alone.

In order to change the attribute of the class conditionally,
var css_val = $(".handle").css('left');
if(css_val == '336px')
{
$(".handle").css('left','300px');
}
If id is given as following,
<a id="handle" class="handle" href="#" style="left: 336px;"></a>
Here is an alternative solution:
var css_val = $("#handle").css('left');
if(css_val == '336px')
{
$("#handle").css('left','300px');
}

Is it possible to add id to a label tag?

I have:
<label for="gender" class="error">Choose</label>
I would like to add an id to this line via jQuery/javascript so the html would end up like:
<label for="gender" class="error" id="addthisid">Choose</label>
Is it possible? How can I do that?

Like this:
$("label[for='gender']").attr("id", "addthisid");
or:
$("label[for='gender']")[0].id = "addthisid";
or:
$("label[for='gender']").get(0).id = "addthisid";

I am guessing you are trying to do that with jQuery. So here we go.
$(function(){
$('label').attr('id', 'addthisid');
});
Here is an example: http://jsfiddle.net/peduarte/RkCLR/