AngularJS radio button will not select appropriate button from ng-model object value

Question

I'm working with an AngularJS app that helps configure reports of information about US states. The type of information is not relevant, however context is always nice.

So I have a collection of US states, and those states each have a frequency that dictates when these reports get created and sent out. These frequencies are split up into three groups, similar to that of meeting occurrences in Microsoft Outlook's calendar. In fact they're the exact same options: 'Daily', 'Weekly', and 'Monthly'. These three options also have sub-options, such as 'Every n number of days' or 'Every weekday' for 'Daily', and 'Every n number of weeks on X, Y, Z days of the week for 'Weekly', etc.

The way these options are displayed is via radio buttons created by an ng-reapeat:

<div id="frequencyOptions" class="btn-group col-md-3 showRightBorder">
    <div id="{{option.name | lowercase}}FrequencyContainer"
         data-ng-repeat="option in stateConfig.frequencyOptions | orderBy:'position'">
      <label class="control-label">
        <input id="{{option.name | lowercase}}Frequency" ng-value="option" type="radio"
               data-ng-model="$parent.selectedState.frequencyOption" />
        {{option.name}}
      </label>
    </div>
  </div>

To clarify, the 'stateConfig' object is this HTML page's angular controller, which is where the options are loaded from, and 'frequencyOptions' are the options themselves.

The desired outcome I'm looking for is to have the appropriate radio button selected based on the currently selected State's frequency option ('$parent.selectedState.frequencyOption'), and then when that selection changes the new selection should be reflected in the selected State's frequencyOption property.

I've tried a few different things so far. One was using the option's ID as the value and model, but when I attempt to change the selected option and save that change to my relational DB (via Spring & Hibernate 4 service back-end) there's an issue with updating the corresponding frequencyOptions Java object with just the ID.

It seems as though I'm doing things pretty correctly based on the other countless threads I've read, but still no luck in getting the selected radio to bind correctly when a state is selected that already has a frequencyOption property set.

Here is the JSON for the frequency options that create the radio buttons via the ng-repeat:

[{
    "id": 780,
    "description": "Daily frequency. Used for sending reports every X number of days, or every weekday (Mon-Fri).",
    "name": "Daily",
    "position": 1
},
{
    "id": 781,
    "description": "Weekly frequency. Select days of the week to send reports on those days every X number of weeks.",
    "name": "Weekly",
    "position": 2
},
{
    "id": 782,
    "description": "Monthly frequency. Select the day of the month to send a report every X number of months.",
    "name": "Monthly",
    "position": 3
}]

And here is an example of a State's frequencyOption property:

"frequencyOption": {
    "id": 780,
    "description": "Daily frequency. Used for sending reports every X number of days, or every weekday (Mon-Fri).",
    "name": "Daily",
    "position": 1
}

I'm pretty confident that the issue lies in my HTML and how I'm representing my angular model, or the value for my ng-value (ng-value="option"), I'm just not sure exactly what it is that I'm missing.

Any help is greatly appreciated. Thanks!!

Very comprehensive question, however you could cut it down to the essentials to make it easier to read. — TimoSolo, Apr 11 '16 at 13:21

TimoSolo · Accepted Answer · 2016-04-11T13:43:58.120

Your code looks fine. It works as-is for me:

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


function MyCtrl($scope) {
  $scope.stateConfig = {
    frequencyOptions: [{
      "id": 780,
      "description": "Daily frequency. Used for sending reports every X number of days, or every weekday (Mon-Fri).",
      "name": "Daily",
      "position": 1
    }, {
      "id": 781,
      "description": "Weekly frequency. Select days of the week to send reports on those days every X number of weeks.",
      "name": "Weekly",
      "position": 2
    }, {
      "id": 782,
      "description": "Monthly frequency. Select the day of the month to send a report every X number of months.",
      "name": "Monthly",
      "position": 3
    }]
  };
  $scope.selectedState = {
    frequencyOption: $scope.stateConfig.frequencyOptions[0]
  };
}

<html ng-app>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="MyCtrl">
  <div id="frequencyOptions" class="btn-group col-md-3 showRightBorder">
    <div id="{{option.name | lowercase}}FrequencyContainer" data-ng-repeat="option in stateConfig.frequencyOptions | orderBy:'position'">
      <label class="control-label">
        <input id="{{option.name | lowercase}}Frequency" ng-value="option" type="radio" data-ng-model="$parent.selectedState.frequencyOption" />{{option.name}}
      </label>
    </div>
  </div>
  <br>Selected Frequency:
  <br>{{selectedState.frequencyOption}}
</div>

</html>

AngularJS radio button will not select appropriate button from ng-model object value

1 Answers1