Develop Reference

unable to bind value to radio button

I am trying to implement a radio group in a list of items. I am unable to set the radion button checked based on the value. Please guide me.
HTML
<div *ngFor="let item of data; let i = index">
<nb-radio-group class="p-3 d-inline-flex">
<nb-radio [checked]="item.data.v === true">open</nb-radio>
<nb-radio [checked]="item.data.v === false">close</nb-radio>
</nb-radio-group>
</div>
only the radio button in last item of an array shows wether the radio button is checked or not. others does not bind data properly.

Please consider using the value property
<nb-radio-group class="p-3 d-inline-flex" [(value)]="item.data.v">
<nb-radio [value]="true">open</nb-radio>
<nb-radio [value]="false">close</nb-radio>
</nb-radio-group>

you should use a *ngswitch to display your opion then based on if the user click or not you will bind data see this example using checkbox and also item.data,v should be a boolean
enter code here
<td><input type="checkbox" [(ngModel)]="item.done" /></td>
<td [ngSwitch]="item.done">
<span *ngSwitchCase="true">
Yes
</span>
<span *ngSwitchDefault>
No
</span>
</td>
and also u should use a filter to return data based on true or false

How to identify the row being edited for dynamically added rows?

Have a set of rows which are added dynamically. A row contains two dropdowns and three textfields and are student objects.
Following is my code :
<tr class="dynamicRow">
<div class="inputField">
<td><b><bean:message key="label.student.code" />:</b>
</td><td >
<logic:present name="studentList">
<html:select property="dgList[0].stuCreate"
styleId="stuSelect" >
<html:option value="">
<bean:message key="label.student.select.code" />
</html:option>
<html:optionsCollection name="studentform"
property="studentList" label="label" value="value" />
</html:select>
</logic:present>
</td>
</div>
...and 3 more fields like this.
My Requirement : When values are populated in the pop up with x number of rows and if I change any field value then how to identify that row has been edited and get the field value before and after editing to update in database? Kindly help.
Code that worked: onchange() called for each field in that row. Means for one row just to check if the value has been changed onchange() is called 5 times. Can this be optimised . Kindly help.

Angular toggle switch issue on duplicated form group

I have a form group that has several form controls within it, including a toggle switch. The toggle switch changes a boolean value in the model to true or false. Dependent upon the value, there is an *ngIf that handles if form controls are displayed or not. This all currently works fine, however I have a requirement to actually basically clone the entire form group, which I have achieved. However, the toggle switch only works on the first form group, and none of the rest. And actually, if I click the toggle on the others it actually toggles just the first one on and off...what am I missing here?
Here is how it looks, I actually clicked the 2nd toggle switch:
The model has this value:
advancedOptions: boolean;
The template is like so:
<div class="advancedOptions">
<div class="service-group jbh-toggle">
Advanced Options:
<label class="toggleLabel inline-block" for="inbond-freight">Hide</label>
<input class="jbh-toggle-checkbox ng-untouched ng-valid ng-dirty" #advancedOptions id="handlingUnitAdvancedOptionsToggle" type="checkbox"
(change)="handlingUnitAdvancedOptionsToggle(advancedOptions.checked)">
<label class="jbh-toggle-label" for="handlingUnitAdvancedOptionsToggle">
<span class="jbh-toggle-inner" id="span-toggleInner3"></span>
<span class="jbh-toggle-switch" id="span-toggleSwitch3"></span>
</label>
<label class="toggleLabel inline-block" for="handlingUnitAdvancedOptionsToggle">Show</label>
</div>
</div>
The *ngIf is simply:
<div *ngIf="advancedOptions"></div>
All the other controls work fine in the duplicated form group, except for the toggle switch.

You can use your formcontrol value of toggle switch like when it's value is true then you can show/hide like below
form.controls.default_checkbox.value != 1

Reactjs - How do I check to see if a user clicks a textbox within a table row?

I have a table with rows with each row containing a textbox where some numbers can be typed in.
In addition, if a user clicks the table row, it expands to show sub fields within that row.
<tr className={this.props.showDetails === true ? 'expanded' : 'collapsed'}
onClick={() => this.props.showOrHideDetails(someArgument)}>
<td className='col-md-2'>
<Glyphicon className="arrow" glyph={this.props.showDetails === true ? 'triangle-bottom' : 'triangle-right'} />
<input className="" type="text" placeholder="Type text"/>
</td>
...
My problem is that if a user clicks within a textbox in order to type stuff, the showOrHideDetails is triggered thus expanding the row and showing the details. Now, of course it makes sense based on the way the code is structured but how do I expand the row ONLY IF they haven't clicked into the textbox part? I haven't quite figured that out yet.
Any help is greatly appreciated.

You could prevent the event from propagating to the parent element. This will prevent showOrHideDetails from firing.
<input onClick={ e => { e.stopPropagation();} } className="" type="text" placeholder="Type text"/>

Angularjs Modal + autocomplete input (Plunker attached)

I have the following plunker attached herewith
http://plnkr.co/edit/3H2q4eVJW5h0K3EdJIBe?p=preview
<html>
</html>
As per the plunker, i have 3 issues which i am not able to fix.
1) When user clicks on 'add row', 3 input fields show up. 2,3 and 1. i want the sequence to be 1,2 and then 3. 1 is the autocomplete input box which should be at the top. If i bring 1 to top, i dont see 2 and 3 then.
2) Ok and Close buttons dont close. Am i doing anything wrong in the function ? Pressing 'ok' should let me retrieve the selected value at input 1. Pressing 'cancel' should close the modal
3) If you see $scope.fetchList, it has a JSON value. I want the $scope.fetchList to be using an array instead. What changes needs to be done in order to get the following. Just an example of autocomplete list items below.
$scope.fetchList = ["ActionScript","AppleScript","Asp","BASIC","C"];

I forked your plunk here
Here's how I addressed your issues:
Issue 1
I just wrapped your elements in div's
<div>
<div>
<br> Select name:
<autocomplete placeholder="Enter sedol" style="width:29%" selection="selection" source="fetchList" />
</div>
<div>
<br> Given Data1:
<input type="text" readonly>
</div>
<div>
<br> Given Data2:
<input type="text" readonly>
</div>
</div>
Issue 2
You hade the save an cancel functions declared in the parent controller rather than the controller for the modal, so I moved it.
Issue 3
I don't understand the issue. fetchList() already returns an array albeit an array of objects rather than an array of strings. Changing it to an array of string breaks all sorts of code in your directive.