jQuery bug in .append with ternary `:?` operators? - javascript

using
var states = {
Abbreviation: "AR",
Name: "Arkansas"
}
Why will this work.
$.each(states, function () {
var o = {
value: this.Abbreviation,
text: this.Name
}
if (this.Abbreviation === "AR") { //hardcoded for you pleasure
o.selected = 'selected';
}
e.append(
$('<option/>', o)
);
});
But not this:
$.each(states, function () {
e.append(
$('<option/>', {
value: this.Abbreviation,
text: this.Name,
selected: (this.Abbreviation === csc.statesDDL.txt().val() ? 'selected' : '')
})
);
});
Are there restrictions to .append within jquery for ternary :? operators?
Notes: I have a logged the output of the if statements, when running the commented out code it shows ALL options as selected, the the logs output only 1 options = true. The uncommitted out code, behaves as expected.

It's not the ternary that's the issue, it appears to be how jQuery/HTML is handling the empty string. jQuery is most likely not resolving the property to an explicit false and thus creating an element with a "selected=''" which the browser may just be interpreting as "selected" which I believe is from an old HTML standard that recognized that as being selected. If you make the false explicit it will work:
selected: (this.Abbreviation === csc.statesDDL.txt().val() ? 'selected' : false)

I'm guessing it is not evaluating it as
((this.Abbreviation === csc.statesDDL.txt().val()) ? 'selected' : '')
but is evaluating it as
(this.Abbreviation === (csc.statesDDL.txt().val() ? 'selected' : ''))

Related

angularjs some method for search data result not working

Search results are not working while entering the details.
For Example i have a value "Google Search Result".
If I search "g", "go", "goo" ... "Google Search" or "Search Result" it is working fine.
But If I search "Google Result", without entering the middle word, it is not showing anything.
How can I achieve this in angularjs,
return cardDetails.filter(function (card) {
return (!$scope.search || ($scope.search && $scope.search.toLowerCase().split(' ').every(function(str){
return card.Tag.toLowerCase().indexOf(str) != -1;
})));
}).length > 0;
$scope.getAllCards.filter Instead of using filter method, how can I use angular "Array Some method"
In this code, search is working fine. But the only thing, I need to enter continiously, if I enter first and last, it is not showing anything. Only empty result is coming.
Can anyone help me to do this?
The some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns a Boolean value.
In your case you need to use every function
The every() method tests whether all elements in the array pass the
test implemented by the provided function. It returns a Boolean value
Here is the working example
const searchValue = "Google Result";
const tags = ["Google", "Google Search Result", "Another Google Result","Result of Google"];
const searchArr = searchValue.split(' ');
const filteredTags = tags.filter(item => {
// loop searchArr array and test if current item includes all occurrence
return searchArr.every(el => item.includes(el));
})
console.log(filteredTags);
For angularjs it will like this
$scope.getTags = function () {
var searchArr = $scope.search.split(' ');
return $scope.getAllCards.filter(function(item) {
return searchArr.every(function(el){
return item.includes(el);
})
}
You could use Array.prototype.reduce() to split the array and search among the it for the search text and return if it exists or not as follows:
const getAllCards = [{
Tag: 'card1',
pillarid: '1'
}, {
Tag: 'card2',
pillarid: '7'
}, {
Tag: 'Google Search Result',
pillarid: '0'
}],
categoryId = 0;
getTags = function(search) {
return getAllCards.some(function(a) {
return a.Tag;
}) ? getAllCards.filter(function(card) {
return (!search || (search && search.split(' ').reduce(function(acc, str) {
return acc && (card.Tag.toLowerCase().indexOf(str.toLowerCase()) !== -1);
}, true) && card.pillarid != '7' && (categoryId == card.pillarid || categoryId == 0)));
}) : [];
}
document.getElementById('input').addEventListener('keyup', function() {
console.clear();
console.log(getTags(this.value));
})
<input id="input" />
PS: you don't need a .map() chained to .filter() as you've put in your example

Based on condition add true or false

I've 5 cells in a table. If the value are empty for those cells i need to disable them.
I can do something like this for each cells which work's.
function cellOne(params) {
if (params.value === null || params.value === undefined) {
return false
} else {
return true;
}
}
"CellOne": { disabled:cellOne }
is there any other way to check null value of each cell and add disable property instead of creating multiple function for each cells. Please help
You don't need to go for typescript code.You can do it in the template itself.
<your-cell [disabled]="!params.value"></your-cell>
Your function would return the same thing as :
function cellOne(params) {
return params.value != null
}
which you can easily inline instead of having a separate function for that.
To check for params that might be null or undefined too, you can use :
return params && params.value != null

How to delete elements of and array by two attributes in AngularJS?

I have an array of objects in AngularJS like this:
var example = [ {id:'1',
read: false,
folder: 'inbox'},
{id:'2',
read: true,
folder: 'inbox'},
{id:'3',
read: true,
folder: 'trash'},
{id:'4',
read: false,
folder: 'trash'}];
And I need to delete any object that has the attributes folder == 'trash' and read == true at the same time.
So I tried to do it like this with lodash:
example = lodash.filter(example, function(value, index) {
return (value.folder !== 'trash') && (value.read !== true);
});
It should delete only the item #3, but it deletes #3 and #4.
Obviously I'm not understanding how lodash.filter really works.
Can someone please help?
You logical operator is not correct. set the condition to folder == 'trash' and read == true and the negate it.
example = lodash.filter(example, function(value) {
return (value.folder == 'trash' && value.read == true) == false;
});
You need to remove the quotes around 'true'. You want to keep all the elements where the folder is not 'trash' or the read property is not true so your logic would look like this
return (value.folder !== 'trash') || (value.read !== true);
The operator !== is false. use == instead.
return (value.folder == 'trash' && value.read == 'true') == false;

Restangular: Not passing parameter if empty

I have the following controller method in a AngularJS application using RestAngular:
$scope.findFriend = function (name, type, limit) {
return FriendSearch.getList({
name: name,
type: type,
limit: limit
});
};
It might be that the type is empty (a string with no content, length = 0) - Restangular generates the following invalid URL:
http://host:port/rest/friends/search?limit=10&name=Peter&type=
Correct would be to omit it like:
http://host:port/rest/friends/search?limit=10&name=Peter
Of course, I can check the parameters before passing. But I would like to know if there is a nicer way to do that.
Unfortunately I cannot reproduce this issue with Restangular version 1.4. I have created a fiddle resembling your example:
http://plnkr.co/edit/ovwd8wUhBkhPXtBNDfbw?p=preview
Excerpt:
// http://run.plnkr.co/search?name=foo
$scope.findFriend('foo');
// http://run.plnkr.co/search?name=foo&type=bar
$scope.findFriend('foo', 'bar');
// http://run.plnkr.co/search?limit=3&name=foo
$scope.findFriend('foo', null, '3');
// http://run.plnkr.co/search?limit=3&name=foo
$scope.findFriend('foo', undefined, '3');
Both null and undefined given as parameters work as intended.
This means we need some more information / code because the behaviour might be caused by something else.
For the case of empty strings the most concise and easy way is to simply check for '' and replace with null.
I updated the fiddle accordingly:
$scope.findFriend = function (name, type, limit) {
return FriendSearch.getList({
name: name === '' ? null : name,
type: type === '' ? null : type,
limit: limit === '' ? null : limit
});
};
// http://run.plnkr.co/search?limit=3&name=foo
$scope.findFriend('foo', '', '3');

how to setup the class name in my case

I am trying to combine the ng-class condition statements in my case.
I have the following statements.
<div ng-class="item.new ? 'newItem' : 'oldItem'; 'discount' : item.getType === true && item.getSave === true">{{item.name}}</div>
I am getting the parsing error.
Syntax Error: Token ':' is an unexpected
I am not sure how to fix this. Can anyone help me about it? Thanks a lot
Use this syntax instead:
<div ng-class="{newItem: item.new, oldItem: !item.new, discount: item.getType === true && item.getSave === true}">
Or alternatively put your logic in a function:
<div ng-class="getClasses(item)">
And in your controller:
$scope.getClasses = function(item) {
return {
newItem: item.new,
oldItem: !item.new,
discount: item.getType === true && item.getSave === true
};
}
FYI: from that function you can return an object, or an array of classes, or a string.

Categories