AngularJS單選按鈕不會從ng模型對象值中選擇適當的按鈕

我正在使用AngularJS應用程序來幫助配置美國各州的信息報告。信息的類型不相關，但上下文總是很好。AngularJS單選按鈕不會從ng模型對象值中選擇適當的按鈕

因此，我收集了美國各州的狀態，每個州都有一個頻率，指示何時創建併發送這些報告。這些頻率分爲三組，類似於在Microsoft Outlook日曆中滿足事件的頻率。事實上，它們是完全相同的選項：「每日」，「每週」和「每月」。這三個選項還具有子選項，例如「每日」的「每n天」或「每個工作日」，以及「每週」的每週X，Y，Z星期中的每n周。等

顯示這些選項的方法是通過由一個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」目的是這個HTML頁的角控制器，它是其中的選項從'加載'，'frequencyOptions'是它們自己的選項。

我期待的結果是根據當前所選狀態的頻率選項（'$ parent.selectedState.frequencyOption'）選擇適當的單選按鈕，然後當該選擇更改時，新選擇應該是體現在所選國家的frequencyOption屬性中。

到目前爲止，我已經嘗試了幾個不同的東西。一個是使用該選項的ID作爲值和模型，但是當我嘗試更改選定的選項並將該更改保存到我的關係數據庫（通過Spring & Hibernate 4服務後端）時，更新相應的frequencyOptions Java對象時出現問題只有ID。

看起來好像我正在做的事情相當正確的基礎上我讀過的其他無數的線程，但仍然沒有運氣讓選定的無線電正確綁定當一個狀態已經有一個frequencyOption屬性設置。

這裏是經由NG重複創建單選按鈕的頻率選項的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屬性的示例：

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

我m非常有信心，問題在於我的HTML，以及我如何表示我的角度模型，或者我的ng值的值（ng-value =「option」），我只是不確定它到底是什麼我錯過了。

任何幫助，非常感謝。謝謝！！

來源

2015-12-03 brad142

非常全面的問題，但是你可以把它刪減到要領，使之更易於閱讀。 – TimoSolo

你的代碼看起來不錯。它的工作原理是，對我來說是：

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>

來源

2016-04-11 13:23:46 TimoSolo

AngularJS單選按鈕不會從ng模型對象值中選擇適當的按鈕

回答

相關問題