无法将单选按钮值输入Controller

时间:2017-11-18 08:14:48

标签: angularjs

我是angularjs.的新手。我有一个表格,我有多行单选按钮和文本框。但我无法获得控制器中单选按钮的值。我的代码:

HTML:

 <tr ng-repeat="consentinfo in listofdata" ng-disabled="abc">
   <td><input type="text" class="form-control" ng-model="consentinfo.consentType"></input></td>
   <td>
      <input id="radio-1{{$index}}" class="radio-custom" name="radio-group{{$index}}" ng-value="consentinfo.option1" ng-model="radio1" type="radio" ng-click="radio()">
      <label for="radio-1{{$index}}" class="radio-custom-label">Yes</label>
      <input id="radio-2{{$index}}" class="radio-custom" name="radio-group{{$index}}" ng-value="consentinfo.option2" ng-model="radio2" type="radio" ng-click="radio()">
      <label for="radio-2{{$index}}" class="radio-custom-label">No</label>
   </td>
   <td>
      <input type="text" ng-model="consentinfo.expDate" class="form-control date" readonly>
   </td>
   <td>
      <input type="text" ng-model="consentinfo.submittedDate" class="form-control date" readonly>
   </td>
   <td><input type="text" value="" class="form-control" ng-model="consentinfo.shortDescription"></td>
   <td><input type="text" value="" class="form-control" ng-model="consentinfo.longDescription"></td>
</tr>

.JS文件:

var consentManagerApp = angular.module('consentManager', []);
consentManagerApp.controller('dataOwnerController', ['$scope', function($scope) {
            $scope.listofdata = [{
                    "consentType": "Do you consent for us to use your  private data for KF Searches",

                    "expDate": "14-12-2017",
                    "submittedDate": "24-04-2017",
                    "option1": "true",
                    "option2": "false",
                    "status": true,
                },
                {
                    "consentType": "Consent to be contacted",

                    "expDate": "10-10-2017",
                    "submittedDate": "12-02-2017",
                    "option1": "true",
                    "option2": "false",
                    "status": true,
                },
                {
                    "consentType": "Consent to be solicited",

                    "expDate": "06-08-2017",
                    "submittedDate": "02-12-2017",
                    "option1": "true",
                    "option2": "false",
                    "status": true,
                },
                {
                    "consentType": "Consent to participate in Trend studies",

                    "expDate": "10-11-2017",
                    "submittedDate": "12-02-2017",
                    "option1": "true",
                    "option2": "false",
                    "status": true,
                },
                {
                    "consentType": "Consent to participate in recruiting practice",

                    "expDate": "10-10-2017",
                    "submittedDate": "12-02-2017",
                    "option1": "true",
                    "option2": "false",
                    "status": true,
                }
            ];


            $scope.submitConsent = function() {

                alert('CTY=' + $scope.choices[0] + 'O2=' + $scope.choices[1]);
                alert('Listdata=' + $scope.radio1 + " " + "O2=" + $scope.radio2);




            }]);

        consentManagerApp.filter('unsafe', function($sce) {
            return $sce.trustAsHtml;
        });

任何人都可以指导我如何获得价值。我需要将其保存在数据库中。

此致 Prabhash

2 个答案:

答案 0 :(得分:0)

使用ng-value="{{consentinfo.option1}}",这将解决您无法获得单选按钮值的问题。

您还错过了函数$scope.submitConsent的一个大括号。

编辑:你的掠夺者有一些误解

您需要动态分配ng-model无线电,点击功能以查看是否可以访问单选按钮的值。此外,还有其他隐藏的错误,如缺少括号。运行代码段。

&#13;
&#13;
<!DOCTYPE html>
<html>
   <head>
      <script data-require="angular.js@1.4.9" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js"></script>
   </head>
   <body  ng-app="consentManager">
      <h1>Hello Plunker!</h1>
      <div ng-controller="dataOwnerController">
         <table >
            <tbody>
               <tr ng-repeat="consentinfo in listofdata" ng-disabled="abc">
                  <td>
                     <input type="text" class="form-control" ng-model="consentinfo.consentType" />
                  </td>
                  <td>
                     <input id="radio-1{{$index}}" class="radio-custom" name="radio-group{{$index}}" ng-value="{{consentinfo.option1}}" ng-model="radio[consentinfo.expDate]" type="radio" ng-click="callClick(radio[consentinfo.expDate])" />
                     <label for="radio-1{{$index}}" class="radio-custom-label">Yes</label>
                     <input id="radio-2{{$index}}" class="radio-custom" name="radio-group{{$index}}" ng-value="{{consentinfo.option2}}" ng-model="radio[consentinfo.expDate]" type="radio" ng-click="callClick(radio[consentinfo.expDate])" />
                     <label for="radio-2{{$index}}" class="radio-custom-label">No</label>
                  </td>
                  <td>
                     <input type="text" ng-model="consentinfo.expDate" class="form-control date" readonly="" />
                  </td>
                  <td>
                     <input type="text" ng-model="consentinfo.submittedDate" class="form-control date" readonly="" />
                  </td>
                  <td>
                     <input type="text" value="" class="form-control" ng-model="consentinfo.shortDescription" />
                  </td>
                  <td>
                     <input type="text" value="" class="form-control" ng-model="consentinfo.longDescription" />
                  </td>
               </tr>
            </tbody>
         </table>
         <button ng-click="submitConsent()">submit</button>
      </div>
   </body>
   <script type="text/javascript">

      var consentManagerApp = angular.module('consentManager', []);
      consentManagerApp.controller('dataOwnerController', ['$scope', function($scope) {
        $scope.radio1;
        $scope.radio2;
                  $scope.listofdata = [{
                          "consentType": "Do you consent for us to use your  private data for KF Searches",
                          "expDate": "14-12-2017",
                          "submittedDate": "24-04-2017",
                          "option1": "true",
                          "option2": "false",
                          "status": true,
                      },
                      {
                          "consentType": "Consent to be contacted",
      
                          "expDate": "10-10-2017",
                          "submittedDate": "12-02-2017",
                          "option1": "true",
                          "option2": "false",
                          "status": true,
                      },
                      {
                          "consentType": "Consent to be solicited",
      
                          "expDate": "06-08-2017",
                          "submittedDate": "02-12-2017",
                          "option1": "true",
                          "option2": "false",
                          "status": true,
                      },
                      {
                          "consentType": "Consent to participate in Trend studies",
      
                          "expDate": "10-11-2017",
                          "submittedDate": "12-02-2017",
                          "option1": "true",
                          "option2": "false",
                          "status": true,
                      },
                      {
                          "consentType": "Consent to participate in recruiting practice",
      
                          "expDate": "10-10-2017",
                          "submittedDate": "12-02-2017",
                          "option1": "true",
                          "option2": "false",
                          "status": true,
                      }
                  ];
      
                  $scope.callClick = function(value){
                    alert(value);
                  }
                  $scope.submitConsent = function() {
                        
                      // alert('CTY=' + $scope.choices[0] + 'O2=' + $scope.choices[1]);
                      // alert('Listdata=' + $scope.radio1 + " " + "O2=" + $scope.radio2);
      
      
                  }
      
                  }]);
      
              consentManagerApp.filter('unsafe', function($sce) {
                  return $sce.trustAsHtml;
              });
   </script>
</html>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

   <input id="radio-1{{$index}}" class="radio-custom" name="radio-group{{$index}}" ng-value="consentinfo.option1" ng-model="consentinfo.option1" type="radio" ng-click="radio()">

替换ng-modal =&#34; radio1&#34;到ng-model =&#34; consentinfo.option1&#34; NG模态=&#34;第二广播电台&#34;到ng-model =&#34; consentinfo.option2&#34;