简体   繁体   English

使用AngularJS将单选按钮值绑定到输入字段

[英]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. 我有三个单选按钮A,B和C。如果选择了B或C,则显示带有日期选择器的输入字段。 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. 如果选择单选按钮“ A”,则“活动”将保存到表中。 If either 'B' or 'C' is chosen then either the current date or the date the user chose is stored in the table. 如果选择“ B”或“ C”,则将当前日期或用户选择的日期存储在表中。 The problem I'm having is, if I choose 'A', 'Active' is stored in the table. 我遇到的问题是,如果选择“ A”,则“活动”存储在表中。 When I go to edit and select 'B' or 'C', 'Active' displays in the input field when it should be the current date. 当我去编辑并选择“ B”或“ C”时,“活动”将在当前日期显示在输入字段中。 I added ng-change to 'B' or 'C'. 我在“ B”或“ C”中添加了ng-change。 In the function if the value == "Active" then display the current date and time. 在函数中,如果值==“ Active”,则显示当前日期和时间。 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. 如果我选择“ B”,请选择一个日期,然后保存,返回并进行编辑,然后选择“ C”,则以前为“ B”保存的日期应为当前日期。 Here is my html: 这是我的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. 请注意,我还将每个单选按钮的ID存储在数据库中。

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. 这可能不是最好的方法,但是在加载页面时,我将存储在表中的ID分配给了局部变量。 Then in the ng-change function I checked the value of this variable against the vm selected. 然后在ng-change函数中,我对照所选的vm检查了此变量的值。 If they weren't equal then I assigned the current date and time to the vm. 如果它们不相等,那么我将当前日期和时间分配给虚拟机。 This seems to work. 这似乎有效。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

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