帶選擇列表值的AngularJS單選按鈕組

我有一個AngularJS應用程序，要求用戶使用單選按鈕組從某些選項中輸入一個數字以指示其選擇。帶選擇列表值的AngularJS單選按鈕組

有3個固定選項（例如值1,2和3）和第四個選項包含帶有附加選項值4,5,6的選擇列表。固定值足以將它們分開但我們希望能夠提供備選方案。

沒有選擇列表作爲第四個選項，一切都很好，但我在處理單選按鈕值和選擇列表的值的2個單獨值時遇到了問題。

理想的情況下，標記爲這種情況有點像

<!-- Controller aliased as ctrl-->  

<!-- Fixed Option 1--> 
<label> 
    <input type="radio" name="selectedNumber" ng-model="ctrl.SelectedNumber" ng-value="1"/> 
    1 
</label> 
<!-- Fixed Option 2--> 
<label> 
    <input type="radio" name="selectedNumber" ng-model="ctrl.SelectedNumber" ng-value="2"/> 
    2 
</label> 
<!-- Fixed Option 3--> 
<label> 
    <input type="radio" name="selectedNumber" ng-model="ctrl.SelectedNumber" ng-value="3"/> 
    3 
</label> 

<!-- Custom Option--> 
<label> 
    <input type="radio" name="selectedNumber" ng-model="ctrl.SelectedNumber" ng-value="?"/> 
    <select ng-model="ctrl.SelectedNumber" ng-options="option for option in [4, 5, 6]"></select> 
</label>

與控制器，看起來像

... 
var ctrl = this; 
ctrl.SelectedNumber = 1; 
...

我的問題是：我怎麼能保持的狀態軌跡單選按鈕組和選擇列表的狀態綁定到單個選定的選項？

jsFiddle可以找到。謝謝！

來源

2015-12-07 rictionaryFever

的的jsfiddle似乎工作。你只是想單選按鈕選擇_appear_嗎？ – jperezov

爲什麼你甚至需要第四臺收音機？ – dfsq

@jperezov，是的，我希望單選按鈕顯示爲選中狀態。它是第4個單選按鈕的ng值，所有單選按鈕上的ng-model以及我遇到的選擇列表上的ng模型之間的相互作用。我只是過分複雜化了嗎？感謝您的關注。 – rictionaryFever

爲了讓選擇字段更新單選按鈕，您實際上需要將其模型設置爲不同的變量，並使用$scope.$watch來同步它們。 Fiddle here。

這是你的更新控制器應該是什麼樣子：

var ctrl = this; 
ctrl.SelectedNumber = 1; 
ctrl.selectVal = 4; 
$scope.$watch('ctrl.selectVal', function(val) { 
    ctrl.SelectedNumber = val; 
});

而更新後的HTML（剛剛過去的單選按鈕/選擇）：

<input type="radio" name="selectedNumber" ng-model="ctrl.SelectedNumber" ng-value="ctrl.selectVal" /> 
<select ng-model="ctrl.selectVal" ng-options="option for option in [4, 5, 6]"></select>

的單選按鈕的ng-value成爲ng-model的選擇。

來源

2015-12-07 20:12:00 jperezov

謝謝。這正是我所期待的。 – rictionaryFever

您也可以調用選擇列表更改的功能來選擇最後一個單選按鈕。如..

HTML

<label> 
    <input type="radio" name="selectedNumber" ng-model="ctrl.SelectedNumber" value="{{ctrl.selectval}}" /> 
    <select ng-model="ctrl.selectval" ng-change="ctrl.selectFromList(ctrl.selectval)" ng-options="option for option in [4, 5, 6]"></select> 
    </label>

和控制器：

app.controller("MainCtrl", function() { 
    var ctrl = this; 
    ctrl.SelectedNumber = 1; 
    ctrl.selectval=4; 
    ctrl.selectFromList = function(getVal) { 
     ctrl.SelectedNumber = getVal; 
    }; 
    });

來源

2015-12-07 20:51:54

帶選擇列表值的AngularJS單選按鈕組

回答

相關問題