user254153 user254153 - 2 months ago 26
AngularJS Question

How to get selected radio button value which contains objects when button click in parameter

I am trying to get the selected radio button value when button click. I am using ajax to populate the radio button options and I want to get selected radio button value when button click. I am tried passing parameter to ng-click function. It used to work incase of select option but below code for radio button didnot worked.

I am using Angular v1.

Angular JS



$scope.modify_pnr = function (obj) {

vm.ssr_details = [];
vm.name_number = [];
$http({
method: 'POST',
url: '<?php echo admin_url('admin-ajax.php'); ?>',
data: $.param({action: "modify_pnr", pnr: obj.target.attributes.data.value, security: ajax_object.ajax_nonce}),
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function (response) {
vm.ssr_details = response.modify_pnr;
vm.name_number = response.link_number;
vm.foraddssr = response.foraddssr;
document.getElementById("loading").style.display = "none";
document.getElementById("modify_ssr_main").style.display = "block";
});
};

$scope.add_ssr = function (obj, details) {
alert(details); //got undefined.
};


HTML



<div class="form-horizontal">
<div ng-repeat = "user in data.foraddssr" class="modify_ssr_segment_select">
<input type="radio" ng-model="details" name="details" value="{carrier : '{{user.carrier}}', segment_no: '{{user.RPH}}'}">

<!-- Here radio button value in object --!>

<div>{{user.from}} &nbsp;&nbsp;<i class="fa fa-arrow-right"></i> &nbsp;&nbsp; {{user.to}}<br><br>
<span class="sprite-img pull-left" style="background-position: <?= get_airline_logo("{{user.carrier}}"); ?>;margin-right: 10px;"></span>
<div class="pull-left">
<?php $a = get_airline_name("{{user.carrier}}");
echo $a['name'];
?><br>
Default Meal : {{user.default_meal}}
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-default" ng-click="add_ssr($event,details)" ng-model="add_ssr">Add</button>
</div>
</div>
</div>

AKA AKA
Answer Source

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.value= 'foo';
    $scope.changedValue= 'foo';
    
    $scope.newValue = function(value) {
       $scope.changedValue = value;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='myApp' ng-controller="MyCtrl">
foo
<input type="radio" ng-model="value" value="foo" ng-change='newValue(value)'>
ben
<input type="radio" ng-model="value" value="ben" ng-change='newValue(value)'>
Jack
<input type="radio" ng-model="value" value="Jack" ng-change='newValue(value)'>    
<hr> 
This value is set from ng-change <b>{{changedValue}}</b>
</div>

This working code will help you integrate in your code. You simply need to add a ng-change here

 <input type="radio" ng-model="details" name="details" value="{carrier : '{{user.carrier}}', segment_no: '{{user.RPH}}'}" ng-change='newValue(details)'>

Then add a function newValue in your controller same as above. Then you will get the changed value when you select radio button.

Also if you want the entire user object when radio button changes then you can pass the user object as a parameter to ng-change like this in HTML

ng-change='newValue(user)'

Then on the $scope.newValue function you can manipulate the user object and access it's properties.