Bind radio buttons value to input field using AngularJS

Question

I have three radio buttons A, B and C. If B or C are selected then an input field with a date picker display. If it's a new record, the current date is to display in the input fields. If radio button 'A' is chosen 'Active' is saved to the table. If either 'B' or 'C' is chosen then either the current date or the date the user chose is stored in the table. The problem I'm having is, if I choose 'A', 'Active' is stored in the table. When I go to edit and select 'B' or 'C', 'Active' displays in the input field when it should be the current date. I added ng-change to 'B' or 'C'. In the function if the value == "Active" then display the current date and time. This works to a point. If I select 'B', select a date and then save, go back and edit and then select 'C', the date that was previously saved for 'B' displays when it should be the current date. Here is my html:

<div class="form-group"
                        <label class=" control-label col-xs-5" for="User">
                            Some Date:
                        </label>
                        <div class="col-xs-7 form-inner-group padRt0">
                            <div class="clearfix stackDate">
                                <input name="SomeDate" id="Date1_0" type="radio" ng-model="vm.approval.SomeDateID" ng-value="1">A<br />
                            </div>
                            <div class="clearfix stackDate">
                                <input name="SomeDate" id="Date1_1" type="radio" ng-model="vm.approval.SomeDateID" ng-change=vm.setDate() ng-value="2">
                                B <input class="form-field cal-field" type="text"
                                                             ng-show="vm.approval.SomeDateID==2" name="SomeDate"
                                                             ng-model="vm.approval.SomeDate"
                                                             datepicker-popup="dd-MMM-yyyy" close-text="Close" ng-model="vm.approval.SomeDateB"><br />

                            </div>
                            <div class="clearfix stackDate">
                                <input name="SomeDate" id="Date1_2" ng-model="vm.approval.SomeDateID" type="radio" ng-change=vm.setDate() ng-value="3">
                                C <input type="text" class="form-field cal-field" ng-required="vm.approval.SomeDateID==3" ng-show="vm.approval.SomeDateID==3"
                                name="SomeDateC" datepicker-popup="dd-MMM-yyyy" close-text="Close" ng-model="vm.approval.SomeDate"><br />
                            </div>
                        </div>
                    </div>

Here is the controller:

  vm.setDate = function () {
        if (vm.approval.SomeDate == "Active")
        vm.approval.SomeDate = currentdateandtime;
    }

Note that I am also storing the id for each radio button in the database.

rsford31 · Accepted Answer · 2015-06-19 15:19:02Z

0

I guess I just needed to talk things through as I ended up figuring it out. This may not be the best way but when the page loaded I assigned the id stored in the table to a local variable. Then in the ng-change function I checked the value of this variable against the vm selected. If they weren't equal then I assigned the current date and time to the vm. This seems to work.

answered Jun 19, 2015 at 15:19

rsford31

1451 gold badge1 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Bind radio buttons value to input field using AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related