AngularJS 单选按钮不会 select 来自 ng-model object 值的适当按钮

Question

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

所以我有 collection 个美国州，每个州都有一个频率，规定了何时创建和发送这些报告。这些频率分为三组，类似于 Microsoft Outlook 日历中的会议发生频率。事实上，它们是完全相同的选项：'Daily'、'Weekly' 和 'Monthly'。这三个选项也有sub-options，如'Every n number of days'或'Every weekday'为'Daily'，'每n周的X、Y、Z天为'Weekly'，等等

这些选项的显示方式是通过 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>

澄清一下，'stateConfig' object 是这个 HTML 页面的 angular 控制器，它是加载选项的地方，'frequencyOptions' 是选项本身。

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

到目前为止，我已经尝试了几种不同的方法。一个是使用选项的 ID 作为值和模型，但是当我尝试更改所选选项并将更改保存到我的关系数据库（通过 Spring 和 Hibernate 4 服务 back-end）时出现问题仅使用 ID.

更新相应的频率选项 Java object

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 属性设置。

这是通过 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
}]

这里是一个州的频率选项示例属性：

"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 以及我如何表示我的 angular 模型，或者我的 ng-value 的值（ng-value="option"), 我只是不确定我到底错过了什么。

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

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

AngularJS 单选按钮不会 select 来自 ng-model object 值的适当按钮

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

data-binding

radio-button

angularjs

ng-repeat

angularjs-ng-model