Could somebody please tell me where this is going wrong? I basically have a simple check of a value - if the value is true, it should set the class to headerOn. If false, it should be headerOff. Easy. Here's the code:
<div ng-class="headerCheck ? 'headerOn' : 'headerOff'">
And the function that I hit:
$scope.headerControl = function() {
$scope.headerCheck = true;
console.log($scope.headerCheck);
}
I can confirm that the log is true. Any ideas why this isn't working for me?
The problem is the syntax here.
The correct approach would be these:
<div class="{{headerCheck ? 'headerOn' : 'headerOff'}}">
or
<div ng-class="{'headerOn': headerCheck, 'headerOff' : !headerCheck }">
The syntax for ng-class is wrong, it should be:
ng-class="{'headerOn' : headerCheck, 'headerOff' : !headerCheck}"
What you have is correct, but you are not telling angularjs that it needs to evaluate what is in the "" as an angular expression. As Karthik stated, you could change the div to
<div ng-class="{headerCheck ? 'headerOn' : 'headerOff'}">
which then makes headerCheck ? 'headerOn' : 'headerOff' an angularjs expression.
EDIT:
Since you did not give a chunk of your code and only gave you snippet, you may want to make sure that the div you referenced in your question is being controlled by the same controller that has your $scope.headerControl function included in.
Related
Came across this when creating an animated dropdown for a navbar.
In a strict React implementation, an inline if/else statement can be used with an onClick toggle to set and remove CSS animation styles. In order to provide a default styling (with no animation) for when state is null, a class can be added before the inline if/else operation:
<div className={`navbar ${reactState ? "expanded" : "collapsed"}`}>
How do I replicate this in NextJS?
I can't find anything in the documentation and have blindly attempted the following (unsuccessfully):
<div className={styles.navbar (reactState ? `${styles.expanded}` : `${styles.collapsed}`)}>
<div className={styles.navbar [reactState ? `${styles.expanded}` : `${styles.collapsed}`]}>
<div className={styles.navbar `${reactState ? `${styles.expanded}` : `${styles.collapsed}`}`}>
The only success I've had is with the following, which seems like overkill:
<div className={
reactState != null ?
(reactState ? `${styles.navbar} ${styles.expanded}`
: `${styles.navbar} ${styles.collapsed}`)
: styles.navbar
}>
I'm clearly not fully understanding how NextJS handles React styling. Any help would be appreciated.
This should work, and it works as same as React. Only you didn't escape the values correctly.
<div className={`${styles.navbar} ${reactState ? styles.expanded : styles.collapsed}`}>...</div>
I am a newbie to jquery.
I have this code written. I want to get the value of 'newValue' when the checkbox is checked. But this code returns 'undefined'.
Please can someone help to get the state of the checkbox: the return value should be true or false, 1 or 0.
$(tableCell).empty();
/Checkbox
$('<input type="checkbox" checked class="EditContactRow" style="width: 20%" />').appendTo($(tableCell)).val(controlValue).blur(function () {
var newValue = $(tableCell).find('checkbox').val();
.....
.....
}
Thanks
Ahoy, Olumide Omolayo
your code seems a little bit messy but it can be fixed for sure. Where is your HTML, would you please add it to your question?
If you need an example: if you have a checkbox you would take it's value by selecting it like this
var myCheckboxValue = $('#myCheckbox').val();
your code:
$('<input type="checkbox" checked class="EditContactRow" style="width: 20%" />')
will not work. since $() is used to access jQuery selectors, those SELECT an element in the HTML/DOM, then you do something with the element. (see this video)
If you want to ADD an element to the HTML/DOM you'd probably use something like
$("#myDiv").html('my html that will be added to the element with id="myDiv"');
Hope this helps. Feel free to ask more :)
P.S. If you post your full code here, we might able to help you much more than just write at random here. People might be able to actually give you the fixed version :)
just a small syntax error.
Change this line var newValue = $(tableCell).find('checkbox').val();
to
var newValue = $(tableCell).find('input[type="checkbox"]').val();
The problem was .find('checkbox') you are trying to find a element who's name is checkbox and you dont have one.. the attempt should be to find a element 's whos type is "checkbox" so use the syntax .find('input[type="checkbox"]')
Correct answer to my question from Reddy
var newValue = $(tableCell).find('input[type="checkbox"]').val();
Thank you all
I've two directives which display based on a variable being configured.
This visually worked but during acceptance tests I found a problem. I attempted to assert that if the <settingElement> hasn't been clicked (configuring the var selected), neither directive is displayed. The test passed for <directiveA> but failed for <directiveB> leaving me a little confused.
An example of the code is below:
<settingElement ng-click="selected = trueOrFalse()"></settingElement>
<directiveA ng-show="selected"></directiveA>
<directiveB ng-show="!selected"></directiveB>
Probably a better way of doing this would be to define selected in a parent of both elements, such as:
<div ng-init="selected = false;">
<settingElement ng-click="selected = true"></settingElement>
<directiveA ng-show="selected"></directiveA>
<directiveB ng-show="!selected"></directiveB>
</div>
Another "shorter workaround" would be
<settingElement ng-click="selected = true"></settingElement>
<directiveA ng-show="!!selected"></directiveA>
<directiveB ng-show="!selected"></directiveB>
It is probably due to the expression triggering with undefined values
try with ng-if ="selected" or ng-show="selected==true"
Success! At least kinda, visually the code works so instead of testing for isDisplayed I simply asserted that the height and width are both 0... not ideal but works.
I have the following HTML element with AngularJS directives:
<div class="progress">
<span ng-repeat="timeRangeObject in timeRangeObjects" style="width: {{timeRangeObject.percentage}}%" ng-class="vm.showVacation == true ? 'progress-bar timerange-{{timeRangeObject.containerType}}' : 'progress-bar timerange-PADDING'" />
</div>
So I concat more than one progress bar with different types/colors.
With the checkbox I will set specific progress bars to color transparent.
Therefore I would need something like this:
... ng-class="vm.showVacation == true ? 'progress-bar timerange-{{timeRangeObject.containerType}}' : 'progress-bar timerange-PADDING | timeRangeObject.containerType == 'XY''"
-> so I would need a filter concerning the ng-class else statement.
Is this possible? The important thing is that only color should change but progress bar should stay where it is.
Thanks a lot
[EDIT]
Here is a link to my problem:
My Example
You have a done a lot of thing that is better if you correct first of all don't use style="width:{{}}" is better if you use ng-style so you don't have to use the bracket, and to answer to your question you can write like this in your ng-class:
<div ng-class="foo()">
js
$scope.foo=function(){
return /*here you put your condition sorry but i didn't understand
the conditions you need*/
}
you can do this with your style attribute too.
Hello everybody I'm trying to replace the 'text' input type to 'password' . And it works with following code :
function replaceT(obj){
var newO=document.createElement('input');
newO.setAttribute('type','password');
newO.setAttribute('name',obj.getAttribute('name'));
obj.parentNode.replaceChild(newO,obj);
newO.focus();
}
But I want to add class of my previous input to the new input and I tried something like this :
function replaceT(obj){
var newO=document.createElement('input');
newO.setAttribute('type','password');
newO.setAttribute('className' obj.getAttribute('class'));
newO.setAttribute('name',obj.getAttribute('name'));
obj.parentNode.replaceChild(newO,obj);
newO.focus();
}
What am I doing wrong, or if that is not possible, how to set the new class manually .. Thank you
This should work across all browsers:
newO.className = obj.className;
I'm not sure whether you should use className or class in setAttribute, but whatever it is, it is definitely the same as in getAttribute, so this is definitely wrong:
newO.setAttribute('className' obj.getAttribute('class'));
newO.setAttribute('className' obj.getAttribute('class'));
You are using 'className' for setting the attribute, but 'class' for getting it. Both must be 'className'.
Sorry for going in the other direction, but why do you replace the element instead of just changing its type in the first place? Than you won't need to worry about adding the same className to the new element.
Just being curious.