2015-09-08 16 views
8

Ich habe zwei Radio-Buttons pass und fail.Wie Wert des ausgewählten Radiobutton erhält in AngularJS

Wie Wert von ausgewählten Optionsfelds erhalten.

<div class="col-md-4"> 
      Result 
      <div class="radio"> 
       <label><input type="radio" name="rdoResult">pass</label> 
      </div> 
      <div class="radio"> 
       <label><input type="radio" name="rdoResult">fail</label> 
      </div> 
     </div> 

Muss ich ng-Modell oder etwas anderes verwenden. In jQuery kenne ich die Dinge gut nicht in angularjs.

+1

zeigen Sie uns Ihre AngularJS Code ... –

Antwort

21

Beide sollten mit unterschiedlichem gleichen ng-model haben ng-value (zur Verwendung mit ausgewählten option s oder radio Taste gemeint ist), so dass der ausgewählte Wert auf result $ scope Variable geändert werden und Sie können in einem Controller auf Form diesen Wert greifen einreichen oder Knopf klicken.

Markup

<div class="col-md-4"> 
    Result 
    <div class="radio"> 
     <label> 
      <input ng-model="result" type="radio" name="rdoResult" ng-value="'pass'"> 
       pass 
     </label> 
    </div> 
    <div class="radio"> 
     <label> 
      <input ng-model="result" type="radio" name="rdoResult" ng-value="'fail'"> 
       fail 
     </label> 
    </div> 
</div> 
+0

Awesome..Most einfachste Weg, um diese Aufgabe zu tun. Danke – Gaurav123

+0

@ Gaurav123 Freut mich zu wissen, dass es half..Danke :) –

+0

Diese Antwort sagt noch nicht, wie man den "Ergebnis" Wert in js überschreitet/erhält, wenn er in html geändert wird. Es erklärt nur, wie es in der HTML-Vorlage verfügbar ist. Die folgende Antwort von Manikanta Reddy funktioniert, wenn ich den Wert von $ scope.result in js habe. – CodeTweetie

1

Ja, Sie haben ng-Modell hinzufügen zu bekommen Wert von Optionsfeld

<div class="col-md-4"> 
       Result 
       <div class="radio"> 
        <label><input type="radio" ng-model="button.value" name="rdoResult" value="pass">pass</label> 
       </div> 
       <div class="radio"> 
        <label><input type="radio" ng-model="button.value" name="rdoResult" value="fail">fail</label> 
       </div> 
      </div> {{button.value}} 
0

Hier ist Ihr Javascript

<script> 
    aap=angular.module('myApp',[]) 
    .controller('myCtrl',["$scope",function($scope){ 
     $scope.change='data'; 
     $scope.getVal=function(){ 

     console.log($scope.changedVal); 
     $scope.change=$scope.changedVal; 
     } 
    }]); 

    </script> 

und Ihre HTML-

<body ng-app="myApp"> 
    <h1>{{1+1}}</h1> 
    <div class="col-md-4" ng-controller="myCtrl"> 
      Result 
      <div class="radio"> 
       <label><input type="radio" name="rdoResult" ng-model="changedVal" value="pass" ng-click="getVal()">pass</label> 
      </div> 
      <div class="radio"> 
       <label><input type="radio" name="rdoResult" ng-model="changedVal" value="fail" ng-click="getVal()">fail</label> 
      </div> 
      {{change}} 
     </div></body> 

working demo

Hoffnung das ist, was Sie suchen.

5

angular.module('resultApp', []).controller('resultCtrl', function($scope) { 
 
    
 
    $scope.result = 'pass'; 
 
    
 
    $scope.submitResult = function(result) { 
 
    
 
    alert(result) 
 
    }; 
 
});
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    </head> 
 
<body ng-app='resultApp' ng-controller='resultCtrl'> 
 
    
 
    <div class="col-md-4"> 
 
    Result 
 
    <div class="radio"> 
 
     <label><input type="radio" ng-model='result' ng-value='"pass"' name="rdoResult">pass</label> 
 
    </div> 
 
    <div class="radio"> 
 
     <label><input type="radio" ng-model='result' ng-value='"fail"' name="rdoResult">fail</label> 
 
    </div> 
 
</div> 
 
    {{result}} 
 
    <button ng-click="submitResult(result)">See Result</button> 
 
    
 
    </body>

0

Innerhalb der Richtlinie und ng-repeat oben genannten Lösungen funktionieren nicht

Hier ist die beste Art und Weise innerhalb Richtlinie gewählten Wert zu erhalten:

Template : '<tr ng-repeat="item in ExistingReportData"><td class="text-center"><input type="radio" name="rbReportData" ng-change="RadioChange(item.ActivityHeaderId)" ng-model="SelectedExistingReportData" ng-value="{{item.ActivityHeaderId}}"/>{{item.ActivityHeaderId}}</td></tr>' 

controller: function ($scope) { 
      $scope.RadioChange = function (s) { 
       $scope.SelectedExistingReportData = s; 
      }; 

      $scope.setWeldDataToGrid = function() { 
       alert($scope.SelectedExistingReportData); 
       // $('.modal').modal('hide'); 
      } 

     } 



'<button class="btn button-main btn-primary btn-sm" id="btnWelderSetTo" ng-click="setWeldDataToGrid()" ><span aria-hidden="true" class="glyphicon glyphicon-save"></span> {{ \'OK\' | translate }}</button>' 
0

dot Mit (.) im ng-Modell löste das Problem:

In Ihrem HTML:

<input id="base" type="radio" name="content" ng-model="radio.fileType" ng-value="'base'" ng-click="refreshScreen()"> 

<input id="dynamic" type="radio" name="content" ng-model="radio.fileType" ng-value="'dynamic'" ng-click="refreshScreen()"> 


<button type="button" class="btn btn-default" ng-click="downloadFile(radio.fileType)">Get Template</button> 

In Ihrem Controller:

angular.module('resultApp', []).controller('resultCtrl', function($scope) { 

    $scope.downloadFile= function(result) {  
    alert(result) 
    }; 
}); 
Verwandte Themen