angular radio button set checked

Question

i have multiple radio button groups i need to set one of each group (maybe none) as selected

datasource

html Code

<div class='row' ng-show="mk.selectedTypeAttributesID.length != 0">
                                            <div class='col-xs-6 col-sm-6 col-md-6 col-lg-6' ng-repeat="att in selectedTypeAttributesID">
                                                <div class="switch-field">
                                                    <div class="switch-title">{{att.name}}</div>
                                                    <div>
                                                        <input ng-repeat-start="val in att.Values" class="bttn-input" type="radio" id="switch_{{val.val}}" name="switch_{{att.id}}"  value="{{val.val}}" ng-click="mk.AttChange(att.id,val.val)"  />
                                                        <label ng-repeat-end class="bttn-input" for="switch_{{val.val}}">{{val.val}}</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

i need to use the value of 'Selected' On the datasource to set the checkbox source Update

Use ng-model, as documented: code.angularjs.org/1.6.9/docs/api/ng/input/input%5Bradio%5D — JB Nizet
– JB Nizet, Commented Aug 13, 2018 at 10:31
Yes, of course. That's not how it works. Read the documentation carefully. The ng-model must contain the value of the selected radio. — JB Nizet
– JB Nizet, Commented Aug 13, 2018 at 10:36

Adrian · Accepted Answer · 2018-08-13 11:24:18Z

1

You need to use ng-model to select the radio button..

Where ng-model holds the selected value as shown below.

$scope.options = [{Selected: false, val: "red"}, {Selected: true, val:"Black"}, {Selected: false, val:"Pink"}];

$scope.selected = undefined;

var findResult = $scope.options.find(function(x){ return x.Selected == true });

if(findResult){
    $scope.selected = findResult.val;
}

Here's a JSFiddle

Edit: Since the sources of the checkboxes are dynamic then build a dynamic selection tree for modal to bind to..

Here's an example:

$scope.options = [{ 0 : [{Selected: false, val: "red"}, {Selected: true, val:"Black"}, {Selected: false, val:"Pink"}]}, { 1 : [{ Selected: false, val: "2" }, { Selected: true, val: "1" }]}];

$scope.choices = [];

for(var i = 0; i < Object.keys($scope.options).length; i++){
    var keys = Object.keys($scope.options);
    $scope.choices.push({ Id: keys[i], Value: $scope.options[i][keys[i]].find(function(x){ return x.Selected == true }).val });
}

JSFiddle

edited Aug 13, 2018 at 11:24

answered Aug 13, 2018 at 10:35

Adrian

8,6573 gold badges28 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

JB Nizet Over a year ago

Wow, that's a serious abuse of filter(). Filter is supposed to filter, not to do something for each element. That's what forEach is for. An even better option would be to use find(): developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Adrian Over a year ago

You're right.. let me modify it, I done it at speed while waiting for project to publish :)

Maher Khalil Over a year ago

that's close but i have dynamic datasource i have uploaded new image i have multiple radio groups and dynamic etc one for size,one for model please note the html code

Adrian Over a year ago

Well, I showed you how to do it, I'm not going to write code for you. You need to modify this to suit your problem. You can't just set the selected value inline because you need to reference it somehow using ng-model and ng-model can not contain inline logic. I see no problem using this method and update stuff accordingly, try using $scope.$watch if you need to listen to change events or use the existing click event you have to update further values down the line (or up the line)...

Maher Khalil Over a year ago

i mean i can't declare a variable $scope.selected = undefined; because i don't know how many radio

Naren Murali · Accepted Answer · 2018-08-13 11:12:30Z

Are you looking for a solution like so?

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

app.controller('MyController', function MyController($scope) {
  $scope.selectedTypeAttributesID = [{
      id: 1,
      Values: [{
        val: "red",
        selected: ""
      }, {
        val: "green",
        selected: ""
      }, {
        val: "blue",
        selected: ""
      }]
    },
    {
      id: 2,
      Values: [{
        val: "1",
        selected: ""
      }, {
        val: "2",
        selected: ""
      }, {
        val: "3",
        selected: ""
      }]
    }
  ];
  $scope.setVal = function(att, index, val) {
    for (var k of att.Values) {
      k.selected = "";
    }
    att.Values[index].selected = val;
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
  <div class='row'>
    <div class='col-xs-6 col-sm-6 col-md-6 col-lg-6' ng-repeat="att in selectedTypeAttributesID">
      <div class="switch-field">
        <div class="switch-title">{{att.name}}</div>
        <div>
          <input ng-repeat-start="val in att.Values" class="bttn-input" type="radio" id="switch_{{val.val}}" name="switch_{{att.id}}" ng-value="val.val" ng-click="setVal(att, $index, val.val)" />
          <label ng-repeat-end class="bttn-input" for="switch_{{val.val}}">{{val.val}}</label>
        </div>
      </div>
    </div>
  </div>
  <pre>{{selectedTypeAttributesID | json}}</pre>
</div>

Collectives™ on Stack Overflow

angular radio button set checked

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related