Menu
Following is my code in which I am not getting selected radio option for each corresponding rows, let me know what I am doing wrong here.
My Plnkr Code - http://plnkr.co/edit/MNLOxKqrlN5ccaUs5gpT?p=preview
Though I am getting names for classes object but not getting the selection.
HTML code -
<body ng-controller="myCtrl">
<div class="container-fluid">
<form name="formValidate" ng-submit="submitForm()" novalidate="" class="form-validate form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-6">
<input type="text" name="name" required="" ng-model="classes.name" class="form-control" />
</div>
</div>
<div class="form-group">
<table id="datatable1" class="table table-striped table-hover">
<tr class="gradeA" ng-repeat="cls in reqgrps">
<td ng-bind="cls.name"></td>
<td><input type="radio" name="groupName[{{$index}}]" ng-model="classes.satisfies"> Choice 1</td>
<td><input type="radio" name="groupName[{{$index}}]" ng-model="classes.satisfies"> Choice 2</td>
<td><input type="radio" name="groupName[{{$index}}]" ng-model="classes.satisfies"> Choice 3</td>
</tr>
</table>
</div>
<div class="panel-footer text-center">
<button type="submit" class="btn btn-info">Submit</button>
</div>
</form>
</div>
<div class="result">{{classes}}</div>
</body>
Script File -
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope){
$scope.reqgrps = [{name: 'Sub1', roll: 121},{name: 'Sub2', roll: 122}, {name: 'Sub3', roll: 123}];
$scope.classes = {};
$scope.result = {};
$scope.submitForm = function() {
$scope.result = $scope.classes;
};
});
------------- EDIT -------------
Expected Output -
classes obj -
{
name: "Test Class",
satisfies: [
"Sub1": "Choice 1",
"Sub2": "Choice 3",
"Sub3": "Choice 2",
.................
..................
..................
..................
"Subn": "Choice 2",
]
}
629
Using Input Radio checked property: The Input Radio checked property is used to return the checked status of an Input Radio Button. Use document. getElementById('id'). checked method to check whether the element with selected id is check or not.
Returns true if the radio button is checked by default, otherwise it returns false.
You'll need to differentiate between each row that is generated by ng-repeat.
You can do this by adding [$index] to each ng-model like this:
<td><input type="radio" ng-model="classes.satisfies[$index]" value="Choice 1"> Choice 1</td>
<td><input type="radio" ng-model="classes.satisfies[$index]" value="Choice 2"> Choice 2</td>
<td><input type="radio" ng-model="classes.satisfies[$index]" value="Choice 3"> Choice 3</td>
As others have mentioned, you can make the result dynamic as needed by using ng-value to set the value that is passed into the model.
The resulting object is something like this:
{"name":"Bill","satisfies":{"0":"Choice 2","1":"Choice 1","2":"Choice 3"}}
See plunker here
155
You should specify a different ng-model property for each row. (Not sure why you'd want to specify the same model on 3 identical rows). In theory you don't HAVE to do this, but as I said, I don't see why you would.
Also you should add a value attribute on your radio buttons:
http://plnkr.co/edit/JN4JuQJH2OvRxoawfDbv?p=preview
From the angular docs:
value string
The value to which the expression should be set when selected.
https://docs.angularjs.org/api/ng/input/input%5Bradio%5D
I would also recommend removing the initialization of empty objects in your controller (if ng-model doesn't find the property on the scope it will just create it for you), and I've noticed you've used ng-bind, in case you didn't know that's just a shortcut for the double brackets: {{}}
EDIT:
In case your value needs to be a dynamic value you can use ng-value and specify a property on the scope which you can then set in your controller
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
