Geek Answers Handbook

Unable to get the value of the radio selection setting in dynamic mode in AngularJS

Below is my code where I do not get the selected radio option for each of the corresponding lines, let me know what I'm doing wrong here.

My Plnkr Code - http://plnkr.co/edit/MNLOxKqrlN5ccaUs5gpT?p=preview

Although I get the names for the classes object, I don't get 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 Result -

obj classes -

 { name: "Test Class", satisfies: [ "Sub1": "Choice 1", "Sub2": "Choice 3", "Sub3": "Choice 2", ................. .................. .................. .................. "Subn": "Choice 2", ] }
+5
source share
3 answers

You will need to distinguish between each line generated by ng-repeat.

You can do this by adding [$ index] to each ng model as follows:

 <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 already mentioned, you can make a dynamic result as needed by using the ng value to set the value that is passed to the model.

The resulting object looks something like this:

 {"name":"Bill","satisfies":{"0":"Choice 2","1":"Choice 1","2":"Choice 3"}}

See here plunker

+3
source

You must specify a different ng-model property for each row. (You don’t know why you want to indicate the same model on 3 identical lines). In theory, you should not do this, but, as I said, I don’t understand why you did it.

You should also add the value attribute on your radio buttons:

http://plnkr.co/edit/JN4JuQJH2OvRxoawfDbv?p=preview

From the angular docs:

value string
The value for 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 does not find the property in the area that it will simply create for you), and I noticed that you used ng-bind if you did not know that it was just a shortcut for double brackets: {{}}

EDIT:

If your value should be a dynamic value, you can use an ng value and specify a property in an area that you can then set in your controller

+1
source

You need to set ng-value for each switch so that Angular can select these values. You have 3 identical lines, so I added some dummy values ​​to display the correct output.

http://plnkr.co/edit/AxUx83xdotniYru6amGU?p=preview

In addition, you can find an explicit example of using Angular switches in white papers here:

https://docs.angularjs.org/api/ng/input/input%5Bradio%5D

UPDATE:

Check out the edited plnkr, hope this helps!

+1
source

More articles:


All Articles