Question

我有一个AngularJS应用程序，要求用户使用单选按钮组从某些选项中输入一个数字以指示他们的选择。

有3个固定选项（例如，值为1,2和3），第四个选项包含一个带有附加选项值4,5,6的选择列表。固定值足以分隔它们但是我们希望能够提供其他选择。

没有选择列表作为第4个选项，一切都很好，但我在处理单选按钮值的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 here。谢谢！

Answer 1

为了让选择字段更新单选按钮，您实际上需要将其模型设置为不同的变量，并使用$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。

Answer 2

您也可以调用选择列表更改功能来选择最后一个单选按钮。像..

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;
    };
  });

AngularJS单选按钮组，具有选择列表值

2 个答案: