2015-09-08 4 views
8

У меня есть две радиокнопки pass и fail.Как получить значение выбранного переключателя в angularjs

Как получить значение выбранного переключателя.

<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> 

Нужно ли использовать ng-модель или что-то еще. В jquery я хорошо знаю вещи не в angularjs.

+1

показать нам свой код angularjs ... –

ответ

21

Оба должны иметь такое же ng-model с различными ng-value (предназначено для использования с отдельными option с или radio кнопкой), так что выбранное значение будет изменено на result переменных $ объема и вы можете получить это значение внутри контроллера на подчиненную форме или нажмите кнопку.

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 простой способ выполнить эту задачу. Спасибо – Gaurav123

+0

@ Gaurav123 Рад узнать, что это помогло ... Спасибо :) –

+0

Этот ответ по-прежнему не говорит о том, как передать/получить значение результата в js при изменении в html. Он только объясняет, как он доступен в шаблоне html. Следующий ответ Маниканта Редди работает, когда у меня есть значение $ scope.result в js. – CodeTweetie

1

Да, вы должны добавить нг-модель, чтобы получить значение кнопки радио

<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

Вот ваш 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> 

и ваш 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

Надежда это то, что вы ищете.

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

Внутри директивы и нг-повтор выше решений не будет работать

Вот это лучший способ, чтобы получить выбранное значение в директиве:

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

Использование точки (.) в ng-модели решает проблему:

В вашем 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> 

В контроллере:

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

    $scope.downloadFile= function(result) {  
    alert(result) 
    }; 
}); 
Смежные вопросы