Checkbox not binding to ng-model inside ng-repeat [duplicate] - html

This question already has answers here:
What are the nuances of scope prototypal / prototypical inheritance in AngularJS?
(3 answers)
Closed 4 years ago.
I am rendering my DataTable the angular way, I added a select all checkbox at the top and per row I added a checkbox and number textbox.
If the checkbox per row is checked then the number textbox would be enabled.
The problem is that for example, I check selectAll then the checkbox per row would be checked but the number textbox remains disabled. I checked the value of the checkbox per row and it was false even though the checkbox was checked.
I cannot remove the api.rows({search:'applied'}) code and just change the value of the checkbox per row using for or angular.forEach because for example the user filters the result using the checkbox and then the user clicked selectAll then it should only check the filtered results.
see plunker.
This was tagged duplicate but the problem is different. My problem was that I changed the prop of the checkbox per row in my datatable.

You should change the ng-model value for each data row and not the checked prop of checkbox.
Angularjs is model driven, you should always change data, it will automatically reflect on UI as per bindings.
Please check this updated plunkr

Related

Keep value in textboxes after adding row

i am currently working on to display the value in textboxes after adding row to the table. I am new to angular and seems i could not find the solution. At the moment, everytime i click on the Add button, the table will add new row but somehow the value that i have entered previously are gone. I need to make the value stays in the textbox every time the user adds new row.
Here is the source code that i have done:
https://stackblitz.com/edit/angular-hxduqp
Thank you.
That happens when you have multiple inputs with the same name.
One way to fix it is by giving your input names a suffix of your iterator i:
<input ... [name]="'from' + i" ...>
Here is your StackBlitz corrected:
https://stackblitz.com/edit/angular-bgdgpr?file=src/app/app.component.html
You just remove the name from the form control if not required else you need to provide the unique name to each control.
Working copy is here - https://stackblitz.com/edit/angular-gpq9nc

Highlight the newly added row in clr-datagrid

I have used clarity UI in my project and i have come across an issue where i want to select the row which is currently added to the clr-datagrid table .I've used clr-DgSelected directive and it gives me a select checkbox which i don't need and if i use [(clrDgSingleSelected)]="selectedUser" this will give me a radio option and it lets me to select the particular column with the radio option checked but the problem is not the radio button or checkbox i just want to highlight the newly added row how i can achieve this.
Any help would be appreciated Thank You
Since Clarity doesn't have the concept of a newly added row, you need to add that concept yourself. Each record could have a isNew or showHighlight property that would allow you to add a CSS class that will highlight it
<clr-dg-row *ngFor="let user of users" [class.highlight]="user.isNew">
<clr-dg-cell>{{user.id}}</clr-dg-cell>
<clr-dg-cell>{{user.name}}</clr-dg-cell>
<clr-dg-cell>{{user.creation | date}}</clr-dg-cell>
<clr-dg-cell>{{user.color}}</clr-dg-cell>
</clr-dg-row>

Can't remove the value entered in the djFilteringSelect dojo control in xPages

I am using the djFilteringSelect control to show values in a dropdown as user type a value.
The lookup and typehead is working fine. The user type a letter and the dropdown allow the user to select a value which is then displayed in the dropdown field.
If the user now decide to remove the value first selected so that the combobox is empty and leave the field, then the first value in the list is now automatically filled in.
The consequence of this is that if the user have added a value there is no way to remove the value and leave the box emtpy.
I am using required=false for both the control and the dojo attribute but it does not seem to help. There are also a few other djFilteringSelect attributes I have tried like "Autocomplete" and "trim" but it does not work
Here is the code
<xe:djFilteringSelect id="test" type="select" store="jsondata" searchAttr="data" required="false" labelType="html" invalidMessage="Not valid">
<xe:this.dojoAttributes>
<xp:dojoAttribute name="required" value="false"></xp:dojoAttribute>
</xe:this.dojoAttributes>
</xe:djFilteringSelect>
Initally the field is not required, but if the user have entered a value it is required.
My question is if there a way to prevent the djFilteringSelect control to always populate the field if I have previously added a value
I found someone who solved this in another stack overflow topic, by creating an empty entry in my data store. but I could not get this to work
Dojo: Select of empty value for FilteringSelect while required=false
I do this quite a lot. Right now I don't have a working sample to show you (since I moved to bootstrap - and have to code the selects by manually adding select2 controls) but something like this should do it...
I add an "empty" value at the top of my select - and that seems to work no matter whether I am using a combobox, djCombobox or combobox with select2 from bootstrap. My markup typically looks like:
<xp:comboBox id="inputLocationSelector" value="#{User.catchListType}" disableClientSideValidation="true">
<xp:selectItem itemLabel="(none)" itemValue=""></xp:selectItem>
<xp:selectItems>
<xp:this.value><![CDATA[${Configuration.meta.listLocationTypeOptions}]]></xp:this.value>
</xp:selectItems>
</xp:comboBox>
Then you could specify "(none)", "All" or " " for the "not-selected" value depending on your needs.
Validation is a different thing so just specifying "required=false" does not give you the "empty" value.
/John

Prevent caching data of a dataTable

I have a ice:dataTable and in each row, there is a inputText. The record list is updated every time when fire a valueChangeListener on some other component.
When it resets the record list, browser shows the previous values for inputText fields in table rows.
I tried both Filter and <meta/> tags. It didn't work for me.
Can somebody tell me how to get rid of this problem?
(Backing bean keeps the actual record list)
This is a JSF problem, take a look at the following answer for details
Input fields hold previous values only if validation failed
To make it simple JSF keeps values in the partialViewContext so all what you have to do to reset all components in the partialViewContext
or if you are using primefaces you can simply add < p:resetInput target="tableId"/> to the field (nested inside) or if you are using OmiFaces then you can use ResetInputAjaxActionListener

auto-check radio-button using struts

I have a jsp page with two radio tags.
The page contains a struts2 form. When I submit the form one of two radio must be automatically checked.
Is it possible to do that?
One of the features of a radio input is that an item in a radio set once selected cannot be deselected except by another member of the set being selected (unlike a checkbox "set"). i.e. if you initialise the page with a selection you can guarantee you will have a value. Does a default value exist you can do this for? Then you can just set checked="checked" on that item.
Alternatively you'll just have to add another validation rule in JS and/or the server side.
I believe that with:
<html:radio property="foo" value="yes"/>
this radio tag will show selected (by default) if the method getFoo() of the form-bean returns the string "yes".
May be you can use that to link your form submit to your radio tags ?