Not entirely sure why this isn't working. I'm trying to hide a col is the value of driveThru is false OR equals to 'N'.
ng-if="location.driveThru === false || location.driveThru === 'N'"
However the === false isn't working and I cant determine why.
if its a boolean change as ,
"!location.driveThru' || location.driveThru === 'N'
and === with string enclosed in quotes if its a string a follows,
ng-if="location.driveThru === 'false' || location.driveThru === 'N'"
Related
I am using ReactJS and a library called React-Table for an online gaming site.
In the table, I have one column cell that could potentially be empty or NULL.
So, if that column cell is null or empty or undefined, then I want to show a value called, "Dungeon Master".
If it's not null or empty, then I just want to show what should be shown(row.original.gamerTag).
So I tried using a ternary operator to check, but no matter what, the value always shows empty.
Here is where I use it:
{
Header: 'Gamer Title',
accessor: 'gamerTitle',
Cell: ({ row }) =>
<a href="#" onClick={() =>
show(
row.original.id,
row.original.gamerTitle,
row.original.gameType,
(row.original.gamerTag == 'undefined' || '' || null) ? 'Dungeon Master' : row.original.gamerTag,
row.original.gameDescription,
)}>
{row.original.gamerTitle}
</a>
},
Am I using it wrong? I don't get any errors or anything.
Thanks!
Replace
(row.original.gamerTag == 'undefined' || '' || null) ? 'Dungeon Master' : row.original.gamerTag
By
typeof row.original.gamerTag === 'undefined' || row.original.gamerTag === '' || row.original.gamerTag === null ? 'Dungeon Master' : row.original.gamerTag
Two problem, the one is myVar == 'undefined' doesnt work because you compare string and not type. And secondly, in js is not short syntaxe for concat condition. Alternatively you can try [undefined, null, ''].includes(row.original.gamerTag).
Try replacing:
(row.original.gamerTag == 'undefined' || '' || null) ? 'Dungeon Master' : row.original.gamerTag
with:
(row.original.gamerTag == 'undefined' || row.original.gamerTag == '' || row.original.gamerTag == null) ? 'Dungeon Master' : row.original.gamerTag
Is there a way to know that user entered invalid date and/or time into datetime-local type of <input> as opposed to him not entering anything?
I would like to treat no input as a sign user wants to reset/remove datetime being edited.
I'm using input['datetime-local'] from AngularJS – https://docs.angularjs.org/api/ng/input/input%5Bdatetime-local%5D.
You can check the state of a datetime-local like so:
<input id="dte" type="datetime-local">
<script>
var myDate = document.getElementById("dte");
myDate.addEventListener("blur", function() {
console.log("valueMissing : " + myDate.validity.valueMissing);
console.log("badInput : " + myDate.validity.badInput);
console.log("valid : " + myDate.validity.valid);
console.log("value : " + myDate.value);
});
</script>
There are other values you can check, but these should fit the requirements you mention:
Value not entered:
valid == false && badInput == false && valueMissing == false && value == ''
Value entered (but not valid):
valid == false && badInput == true && valueMissing == false && value == ''
Value entered (and valid):
valid = true && badInput == false && valueMissing = false && value == 'whatever date you entered'
Im working on a complex app where I need to disable a link if the ID sent from backend meets a certain criteria.
I'm using this now but not sure if it is correct:
ng-show="parentheaderData.casid === '807' || '806' || '808' ?false:true"
Does this look right?
Why don't you move this logic to a controller so you have
html :
ng-show="showParentheader(parentheaderData.casid)"
controller:
$scope.showParentheader = function(id) {
return ! (id === '807' || id ==='806' || id ==='808');
}
Thanks for all the support. The correct solution was:
ng-hide="parentheaderData.casid == '806' || parentheaderData.casid == '807' || parentheaderData.casid == '808'"
you can do like this:
ng-show="(parentheaderData.casid === '807' || parentheaderData.casid ==='806' parentheaderData.casid === || '808') ? false : true"
or:
ng-show=" !(parentheaderData.casid === '807' || parentheaderData.casid ==='806' parentheaderData.casid === || '808')"
ng-show="(parentheaderData.casid === '807' || parentheaderData.casid ==='806' parentheaderData.casid === || '808') ? false : true"
When using angular, I had a very strange issue:
<div ng-app>
<textarea ng-model="resp" placeholder="Response"></textarea>
<a ng-show="resp">Respond</a>
</div>
Fiddle
When writing something into the textarea, the Respond link is shown.
However, strangely, when writing the letter 'f', the Respond button doesn't show.
A workaround for this is to use the condition resp.length>0, but I wonder why the letter 'f' behaves in a special way.
Actually 'f' is considered as false.
AngularJS uses the toBoolean function internally to evaluate ng-show / ng-hide expressions.
You should get the same behaviour for "f", "false", "0", "n", "no" and "[]".
You can read more about it here: https://github.com/angular/angular.js/issues/1229.
This is angular's toBoolean function:
function toBoolean(value) {
if (typeof value === 'function') {
value = true;
} else if (value && value.length !== 0) {
var v = lowercase("" + value);
value = !(v == 'f' || v == '0' || v == 'false' || v == 'no' || v == 'n' || v == '[]');
} else {
value = false;
}
return value;
}
Update:
In AngularJS 1.3+ this behaviour has been removed.
Quote: Due to bdfc9c02, values 'f', '0', 'false', 'no', 'n', '[]' are no longer treated as falsy. The only JavaScript values that are treated as falsy by the expression parser are now: false, null, undefined, NaN, 0 and "".
My recommendation would be to check to see if resp is an empty string. Since your textarea is a string value if the string is not empty then your respond text will be displayed.
<div ng-app>
<textarea ng-model="resp" placeholder="Response"></textarea>
<a ng-show="resp != ''">Respond</a>
</div>
Check out using strict checks for conditions. 'F', 'f', 'N', 'n', '0' also don't work in your fiddle. They are considered to be shortcuts for 'false'. Typing out 'false' also fails to show the 'Respond' button.
It's just the opposite, "f" is treated as false. Note that so are all the following:
"F"
"false"
"FALSE"
"FaLsE"
" faLse "
""
" "
" "
(i.e., case and leading/trailing whitespace do not matter)
However, partial words (e.g., "fa", "fal", "fals") are not.
I have always thought ngShow and ngHide act as boolean counterpart to each other. That belief, however, is shaken by the unexpected behaviour of ngShow when an empty array is involved.
Here is a demo plunker. Why isn't ng-show="!emptyArray" behaving like ng-hide="emptyArray"?
Because [] !== false. You can coerce the length value to boolean instead with !!.
<div ng-hide="!!emptyArray.length">emptyArray is falsy, so do not hide this.</div>
<div ng-show="!!!emptyArray.length">!emptyArray is truthy, so show this.</div>
Edited:
AngularJS's directive hide or show depends on the function toBoolean() for evaluating the value passed in. Here is the source code of toBoolean():
function toBoolean(value) {
if (value && value.length !== 0) {
var v = lowercase("" + value);
value = !(v == 'f' || v == '0' || v == 'false' || v == 'no' || v == 'n' || v == '[]');
} else {
value = false;
}
return value;
}
And you can verify the following code in JS console:
>var emptyArray = [];
>toBoolean(emptyArray)
false
>toBoolean(!emptyArray)
false
That explains why. Since when emptyArray is passed to the toBoolean() directly, it evaluates the correct result false. However when !emptyArray is passed to toBoolean(), it doesn't evaluate to true since !emptyArray is false itself.
Hope it helps.
ng-if and ng-show mistreats "[]" (empty array)
See: this link
[] == true
false
[] != true
true
(![]) == true
false
[''] == true
false
(!['']) == true
false
"" == true
false
"[]" == true
false
(!"[]") == true
false
Sounds its by design.
I use something like this , it works to me
ng-hide="array.length == 0"