Ember.js checkbox binding initial value set incorrectly - javascript

Somehow the checkbox in my Ember app is always initially checked.
...
{{#each model.fields}}
...
{{input type="checkbox" checked=isOptional}}
The fields array is an attribute in my model. Each object in fields array has an attribute called isOptional, which can be "true" or "false".
For some reason, regardless of the value of isOptional, the checkbox is initially checked.
If I check the checkbox manually, the isOptional flag will actually be changed. So the binding works except for detecting the initial value.
Any help is much appreciated, thanks!
Edit: As discussed in comments, the problem was because my model was returned by Ember.$.getJSON(), which has "false" in quotes and was interpreted as true value, resulting in checked checkboxes. I resolved this by over-writing the boolean values:
model.fields.forEach(function(field, i) {
Ember.set(field, 'isOptional', (field.isOptional == 'true'));
});

A jsbin example you can fiddle with
http://emberjs.jsbin.com/kukokiti/1/
If you can provide your own jsbin, we can help out more.
EDIT: You can see the effects of the 'false', in a string value.
The easiest way might be to define a computed property on the model you are using.

Related

check if input/value in b-form-selected

I have a b-form-select and when I choose one option I want to enable my button. But I don't know how to check if there is a value in my selection.
Thanks for helping me out !
<b-form-select v-model="data.Name" :value="data.Name"></b-form-select>
<b-button :disabled="!validDataAdded"></b-button>
computed: {
validDataAdded: function(){
return //Check here
},
}
In order to answer that question first we need to make some things clear.
v-model uses the :value attribute under the hood as a way to communicate with the component and pass down values. That been said you dont need to add a :value attribute to your select component. If you need to set a initial value you simply need to set an initial value to your v-model.
If you want to check if there is a value to your selection you just need to check if the v-model has a value. Remember that a v-model corresponds to a property (either part of data or computed section).
In you example you need to check if data.Name contains a value or not.
Check out this sandbox where I create an example for you according you code-snippet.
Last but not least the way that you have written your v-model it seems that you have an object called data inside your data property

Angular -> ng-repeat filtered array variable

Below I will put link to my example in Plunker to show you my problem.
In ng-repeat I have used array(filtrowane) to store data from filter result, also I have added ng-change on input for showing the value of filtrowane.length in console. Variable filtrowane is defined in controller, and after typing something It`s showing different values in console and in the view, can you tell me why?
PS. run your web browser console and you will see the difference.
example Plunker
When you change value, first ng-change is called, then $digest starts which will update filtrowane.
If you use such notations:
item in filtrowane = (tablica | filter:search)
do not use filtrowane in controller. Html should be view, so you should not declare any variables there, which you use in model (js).
Look here: http://plnkr.co/edit/QAHlbuZqWX4szglvMP87?p=preview
This code does same as yours, but filtering is done in javascript. A bit more complicated, but things are more clear. (it is also better for big arrays)
Use ng-blur instead of ng-change
<input type="text" ng-model="search" ng-blur="sprawdzFiltr()">
This is due to the ng-change is probably executed before the filter is applied, so the old value will be taken.

How to edit/delete all text on an required field in AngularJS

While editing an angular textbox marked as "required", I am unable to delete the 1st letter. However if I move my cursor to before the 1st letter, and enter some text and then delete the last letter left earlier, I am able to do my required edit.
Note: No such issue being observed while creating a new record.
Please find the sample code being used.
<input type="text" class="form-control" ng-model="vm.xyz.firstName" ng-model-options="modelOptions" required />
Used library version: angular: 1.3.15, bootstrap:3.3.2
Thanks in advance.
This is the expected behaviour as per documentation:
If the validity changes to invalid, the model will be set to undefined, unless ngModelOptions.allowInvalid is true.
Since you set your field as required, when it becomes empty, it becomes $invalid, which in turn sets your model to undefined. If you add allowInvalid: true to your ngModelOptions settings, your model will be allowed to receive the empty string value instead of undefined. Plunkr here.
As described by #leonardo-braga, this happens because the field becomes invalid upon deletion of the last character and the $modelValue set to undefined (which tricks your getter/setter into believing it has been called in "getter" mode).
A similar question has been answered on GitHub.
Copying here for easier reference:
Using allowInvalid will work around the issue, but it is not solving the actual problem.
The actual problem lies in the implementation of the getter/setter function, which treats passing an argument with value undefined as passing no argument at all (although these are obviously two very distinct cases).
You should use a more "accurate" way of defining whether the function is called as a getter or as a setter (i.e. whether an argument has been passed (even if undefined) or not).
E.g.:
getterSetterFn: function (newValue) {
if (arguments.length) {
_value = newValue;
}
return _value;
}
See, also, this short demo.

jQuery MultiSelect Library Uses Incorrect Method to Handle "Select All"?

I'm trying to update a large web application that uses an extended version of Cory S.N. LaViska's jQuery.multiSelect plugin.
I updated to the latest code and it fixed a problem I was encountering. However, it introduced a new problem: Checking the Select All option now unchecks everything instead of checking it.
I'm not super advanced in JavaScript but have isolated the problem to the following code:
currentMultiSelect.next('.multiSelectOptions').find('INPUT.selectAll').click(function () {
if ($(this).attr('checked') == true)
$(this).parent().parent().find('INPUT:checkbox').attr('checked', true).parent().addClass('checked');
else
$(this).parent().parent().find('INPUT:checkbox').attr('checked', false).parent().removeClass('checked');
});
The problem is that $(this).attr('checked') returns "checked". And so $(this).attr('checked') == true will always be false. And the code never detects that this option is, in fact, checked!
Okay, so I understand the problem. But why would it ever be written this way, and what is the most reliable way to fix this? I'd be interested to know how a JavaScript/jQuery expert would address this.
checked is a property, you should use prop method, when a boolean attribute like disabled or checked is set to an element, the value is mapped to the relevant DOM property of the element(browser do this), as of jQuery 1.6 for modifying properties, prop method should be used instead of attr.
So you code should looks like this
currentMultiSelect.next('.multiSelectOptions').find('INPUT.selectAll').click(function () {
if ($(this).is(':checked'))
$(this).parent().parent().find('INPUT:checkbox').prop('checked', true).parent().addClass('checked');
else
$(this).parent().parent().find('INPUT:checkbox').prop('checked', false).parent().removeClass('checked');
});
Better if you use .is(":checked") for checking whether the checkbox is checked or not. But use prop to set the checked property of checkbox.
Rather than using $(this).attr('checked') == true which will return a string try $(this).prop('checked') == true
$.prop() will return boolean true when the element is checked or boolean false when it is not.
A little extra information on $.attr() is it returns the contents of the attribute. So if your html is:
<input id="elem" type="checkbox" checked="checked" />
Then $('#elem').attr("checked") is only going to return the string inside that attribute of the selected element.
If you really wanted to use $.attr() you could do this.
if ($(elem).attr("checked") != '') { ... }

checked = "checked" vs checked = true

What is the difference between the below two usages?
document.getElementById('myRadio').checked = "checked";
and
document.getElementById('myRadio').checked = true;
For me, both are behaving the same way. But, I am just curious to know why there exist two methods to do the same.
Which one will be the ideal usage? I need to support IE7 and higher versions.
document.getElementById('myRadio').checked is a boolean value. It should be true or false
document.getElementById('myRadio').checked = "checked"; casts the string to a boolean, which is true.
document.getElementById('myRadio').checked = true; just assigns true without casting.
Use true as it is marginally more efficient and is more intention revealing to maintainers.
The element has both an attribute and a property named checked. The property determines the current state.
The attribute is a string, and the property is a boolean. When the element is created from the HTML code, the attribute is set from the markup, and the property is set depending on the value of the attribute.
If there is no value for the attribute in the markup, the attribute becomes null, but the property is always either true or false, so it becomes false.
When you set the property, you should use a boolean value:
document.getElementById('myRadio').checked = true;
If you set the attribute, you use a string:
document.getElementById('myRadio').setAttribute('checked', 'checked');
Note that setting the attribute also changes the property, but setting the property doesn't change the attribute.
Note also that whatever value you set the attribute to, the property becomes true. Even if you use an empty string or null, setting the attribute means that it's checked. Use removeAttribute to uncheck the element using the attribute:
document.getElementById('myRadio').removeAttribute('checked');
The original checked attribute (HTML 4 and before) did not require a value on it - if it existed, the element was "checked", if not, it wasn't.
This, however is not valid for XHTML that followed HTML 4.
The standard proposed to use checked="checked" as a condition for true - so both ways you posted end up doing the same thing.
It really doesn't matter which one you use - use the one that makes most sense to you and stick to it (or agree with your team which way to go).
document.getElementById('myRadio') returns you the DOM element, i'll reference it as elem in this answer.
elem.checked accesses the property named checked of the DOM element. This property is always a boolean.
When writing HTML you use checked="checked" in XHTML; in HTML you can simply use checked. When setting the attribute (this is done via .setAttribute('checked', 'checked')) you need to provide a value since some browsers consider an empty value being non-existent.
However, since you have the DOM element you have no reason to set the attribute since you can simply use the - much more comfortable - boolean property for it. Since non-empty strings are considered true in a boolean context, setting elem.checked to 'checked' or anything else that is not a falsy value (even 'false' or '0') will check the checkbox. There is not reason not to use true and false though so you should stick with the proper values.
checked attribute is a boolean value so "checked" value of other "string" except boolean false converts to true.
Any string value will be true. Also presence of attribute make it true:
<input type="checkbox" checked>
You can make it uncheked only making boolean change in DOM using JS.
So the answer is: they are equal.
w3c

Categories