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

Answer 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

Answer 2

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>