Question

我对角度很新，所以也许答案就在我的面前，特别是因为我看过非常相似的问题，但没有一个对我有用。正如标题所示，我正在尝试根据ng-class中选择的3个单选按钮中的哪一个来更改ng-repeat。我在示例中尝试过的一些事情是ng-click，尽管这似乎表现为布尔true / false行为，我认为我需要更多类似switch的行为。我也尝试过解决方案here，虽然这似乎不适用于有条件的情况。以下是我的工作内容：

<div class="col-md-4 col-sm-4 col-xs-12 projectType" ng-repeat="type in types">
   <label>
      <span class="typeIcon" ng-class="type.icon"></span>
      <p>{{ type.name }}</p>
      <input type="radio" name="type" ng-value="type" ng-model="$parent.selectedType" />
   </label>
</div>
<div class="col-md-12 col-sm-12 col-xs-12" ng-hide="selectedType.id !== 1">
    <input type="text" ng-hide="selectedType.id !== 1" ng-disabled="selectedType.id !== 1">
</div>
<div class="col-md-12 col-sm-12 col-xs-12" ng-hide="selectedType.id !== 2">
    <input type="text" ng-hide="selectedType.id !== 2" ng-disabled="selectedType.id !== 2">
</div>
<div class="col-md-12 col-sm-12 col-xs-12" ng-hide="selectedType.id !== 3">
    <input type="text" ng-hide="selectedType.id !== 3" ng-disabled="selectedType.id !== 3">
</div>

控制器只是为每种类型应用功能，例如id和name。

我特别想要做的是在选择background-color时更改父标签的radio。我还在下面添加了一些div，它们也根据选择radio来切换，以显示一些可能成为任何可能解决方案的障碍或资产的现有逻辑。我知道这可能是一个非常简单的角色任务，所以我感谢你的耐心和帮助。

Answer 1

您可以通过以下方式修改HTML：

<div class="col-md-4 col-sm-4 col-xs-12 projectType" ng-repeat="type in types">
   <label ng-class="{ 'red': $parent.selectedType.value === type.value }">
      <span class="typeIcon" ng-class="type.icon"></span>
      <p>{{ type.name }}</p>
      <input type="radio" name="type" ng-value="type" ng-model="$parent.selectedType" />
   </label>
</div>

JS部分是（用于测试）：

$scope.$parent.selectedType = {};
$scope.types = [ { name: 'a', value: 'A' }, { name: 'b', value: 'B' }, { name: 'c', value: 'C' } ];

Answer 2

以下是如何做你需要的：

选择收音机后，其背景颜色会变为红色，因为我创建了这个类：

.selectedlabel { background-color: red; }

然后使用类似下面的ng-class将其应用于无线电输入的标签

<label ng-repeat="type in types" ng-class="{selectedlabel: $parent.selected == type.id}">
<input type="radio" ng-model="$parent.selected" name="Group" ng-value="type.id"> {{type.name }}
<br>

为了显示/隐藏选定无线电的div，我使用了ng-show

 <div ng-show="selected == 1">

完整的小提琴在这里：Fiddle

根据ng-repeat中选定的无线电更改ng-class

2 个答案: