javascript - Need to get value of the radio button and pass it to the backend using HTML and angularJS,and the data displayed in the frontend is a list

Question

//This is my HTML code wherein am returning a list from backend.

<ul> <li ng-repeat=" opt in bcfList1 track by $index" > <input type="radio" name="buildid" id="buildid" ng-model = $parent.selected ng-value="bcfList1" required> {{ opt }} </li> </ul>

//This is my controller.js program

$scope.getDetails =function(data){
        var id=data.id;
        $('#addNode3').modal('show');
        UpgradeService.getDataById(id).then(function(data){
            if(data!=null){
               $scope.List1=data.BUILDNUMBER;
            }
        });
    }

I need to get the string value that'll be listed in front of the radio button. So once I click on radio button it should send that value to the controller.js By using ng-model I need a solution. Help me out!!

Answer 1

If I understand correctly, you need to gather which input type radio was clicked in controller and send this information to backend.

ng-model directive is very good approach here and you can use it just like so:

html

<label>
  One
  <input type="radio" value="one" ng-model="radio">
</label>
<label>
  Two
  <input type="radio" value="two" ng-model="radio">
</label>

<br><br>{{ radio }}<br>

JS

app.controller('MainCtrl', function($scope) {
  $scope.radio = '';
  $scope.consoleLogRadio = function() {
    console.log($scope.radio);
  }

});

Take a look at plunker example

Answer 2

You need to add ng-change to your input fields with a call to that function. Here is a quick demo:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.b = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  $scope.getDetails = function(index) {
    console.log("sending data", index,$scope.selected);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="a in b track by $index">
    <input type="radio" ng-model="$parent.selected" ng-value="a" ng-change="getDetails($index)" /> {{a}}
  </div>
</div>