2017-11-18 4 views
-1

私はangularjs.Iに新しいですラジオボタンとtextboxes.Butの複数の行を持っているフォームを持っていますcontroller.Myのラジオボタンの値を取得することができません:コントローラにラジオボタンの値を取得することができません

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; 
     }); 

は、いずれかが、私は.Iがデータベースに永続化する必要がある値を取得することができますどのように私を導くことができます。ラジオボタンの値を取得していないため、あなたの問題を解決します

よろしく、 Prabhash

+0

「フィドル」をご提供できますか? –

+0

以下の回答を参照してください。それが正しいかどうかを確かめてください –

答えて

0

使用ng-value="{{consentinfo.option1}}"、。

また、関数$scope.submitConsentの中括弧のうちの1つも欠けています。

EDIT:特定のmisconceptsはあなたがラジオボタンの値にアクセスできるかどうかを確認するためにクリック機能を持って、動的にラジオのためのあなたのng-modelを割り当てる必要が

あなたplunkerにあります。また、括弧がないなどの他の隠れたバグもありました。スニペットを実行します。

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <script data-require="[email protected]" 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>

+0

私は変更を行い、consentinfo.option1、consentinfo.option2を$ scope.option1と$ scope.option2を書き込んでいる私の.jsファイルに渡していますが、未定義です。 –

+0

@PrabhashMishraあなたのフォームコードも共有できますか? –

+0

要件は最初のテキストボックス値で、2つの日付値はinit.Thatsラジオボタンの値と最後の2つのテキスト値を入力することができます。私はラジオとテキストボックスの静的なエントリを取得する方法を知っています。しかし、ここでそれは動的です。私はlistofdata [$インデックス]を試しましたが、最後の2つのテキストボックスで動作していませんでした。 angularjsでアクセスします。 –

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-モデル= "consentinfo.option1" NG-モーダルNG-モデル= "consentinfoへ= "radio2" にNG-モーダル= "Radio1のを" 交換してください。 option2 "

+0

私は変更を行い、consentinfo.option1、consentinfo.option2を$ scope.option1と$ scope.option2を書き込んでいる私の.jsファイルに渡していますが、定義されていません。 –

関連する問題