javascript - 单击参数中的按钮时如何获取包含对象的选定单选按钮值

Question

我试图在单击按钮时获取选定的单选按钮值。我正在使用 ajax 填充单选按钮选项，我想在单击按钮时获取选定的单选按钮值。我尝试将参数传递给 ng-click 函数。它曾经在选择选项的情况下工作，但下面的单选按钮代码不起作用。

我正在使用 Angular v1。

AngularJS

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

Answer 1

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>

此工作代码将帮助您集成到您的代码中。您只需在此处添加ng-change

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

然后在 Controller 中添加一个函数 newValue ，与上面相同。然后，当您选择单选按钮时，您将获得更改后的值。

此外，如果您希望在单选按钮更改时获得整个 user 对象，那么您可以将 user 对象作为参数传递给 ng-change就像 HTML 中的这样

ng-change='newValue(user)'

然后，在 $scope.newValue 函数上，您可以操作 user 对象并访问其属性。