简体   繁体   中英

Bind radio buttons value to input field using AngularJS

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.

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM