0

我发现的所有示例都显示了由一些 for item in items 循环构建的单选按钮组，但它们都没有显示对 angularjs 控制器中单选按钮组数组的简单访问。我需要做的是遍历按钮组数组，看看它们是否处于“选中”状态。

var radioSelected = false;

for(var i =0; i < items.length; i++) {
  if(items[i].selected) {
     radioSelected = true;
  }
}

我尝试绑定到 ng-model 并访问它。我尝试使用 $scope.ButtonGroupName 没有任何东西可以生成一个可以循环遍历的数组。任何关于如何在非常简单的活动中执行此操作的建议将不胜感激。

一定喜欢被迫重新学习 Web 开发，因为有人打破了一个新的闪亮之锤。

4

1 回答 1

2

您不会遍历 DOM 元素。您将对所有单选元素使用相同的 ng-model，并且每当您更改单选按钮的选定状态时，都会更新该模型。

<input type="radio" ng-model="assignedValue" name="myRadio" value="one">
<input type="radio" ng-model="assignedValue" name="myRadio" value="two">
<input type="radio" ng-model="assignedValue" name="myRadio" value="three">

您将$watchfor$scope.assignedValue更改而不是遍历 DOM 元素。

$scope.$watch('assignedValue', function (newValue, oldValue) {
  ..do stuff here
});

有关文档，请参见此处：https ://docs.angularjs.org/api/ng/input/input%5Bradio%5D

您不遍历 DOM 的原因是它在不断变化。Angular 的全部意义在于处理数据而不是元素本身。

更新：根据您的评论，如果选择了单选按钮，听起来只想执行一个动作。

首先，单选按钮应该始终处于选中状态。让我们假装它没有。您可以通过多种方式启用/禁用/显示/隐藏 Angular 元素，而无需编写额外的 DOM 操作代码。

assignedValue以上面的例子为例，这个按钮只有在is时才会被启用two。

<button ng-disabled="assignedValue != 'two'">My button</button>

您还可以使用以下方法有条件地包含内容ng-if：

<div ng-if="assignedValue == 'two'>
  My conditional content
</div>

这也适用于ng-switch

<div ng-switch on="assignedValue">
    <div ng-switch-when="two">My additional content</div>

    <div ng-switch-default>Here's switch fallback content</div>
</div>
于 2014-05-15T19:54:58.303 回答