AngularJS 单选按钮不会从 ng-model 对象值中选择适当的按钮答案

【问题标题】：AngularJS radio button will not select appropriate button from ng-model object valueAngularJS 单选按钮不会从 ng-model 对象值中选择适当的按钮
【发布时间】：2016-03-08 14:09:59
【问题描述】：

我正在使用一个 AngularJS 应用程序来帮助配置有关美国各州的信息报告。信息的类型不相关，但上下文总是很好。

因此，我收集了美国各州，每个州都有一个频率，该频率决定了这些报告的创建和发送时间。这些频率分为三组，类似于 Microsoft Outlook 日历中的会议发生频率。事实上，它们是完全相同的选项：“每日”、“每周”和“每月”。这三个选项还有子选项，例如“每天”的“每 n 天”或“每个工作日”，“每周”的“每周 X、Y、Z 天的每 n 周”，等等。

这些选项的显示方式是通过 ng-repeat 创建的单选按钮：

<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>

为了澄清，'stateConfig' 对象是这个 HTML 页面的角度控制器，是从中加载选项的地方，而 'frequencyOptions' 是选项本身。

我正在寻找的期望结果是根据当前选择的州的频率选项（'$parent.selectedState.frequencyOption'）选择适当的单选按钮，然后当该选择发生变化时，应该反映新的选择在所选状态的频率选项属性中。

到目前为止，我已经尝试了一些不同的方法。一个是使用选项的 ID 作为值和模型，但是当我尝试更改所选选项并将该更改保存到我的关系数据库（通过 Spring 和 Hibernate 4 服务后端）时，更新相应的 frequencyOptions Java 对象存在问题只有 ID。

似乎我根据我读取的其他无数线程正确地做到了正确的事情，但在选择已经具有shiftOption属性集的状态时，仍然没有运气正确绑定。

这是通过 ng-repeat 创建单选按钮的频率选项的 JSON：

[{
    "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
}]

下面是 State 的 frequencyOption 属性的示例：

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

我非常有信心问题出在我的 HTML 以及我如何表示我的角度模型或我的 ng-value (ng-value="option") 的值，我只是不确定我错过了什么。

非常感谢任何帮助。谢谢！！

【问题讨论】：

非常全面的问题，但是您可以将其精简为基本内容，以便于阅读。

标签： angularjs data-binding radio-button ng-repeat angularjs-ng-model

【解决方案1】：

您的代码看起来不错。它对我来说按原样工作：

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>

【讨论】：