单选按钮选择反映在 ng-repeat 的第二组单选按钮中

Question

我需要一个四单选按钮。第一次迭代生成 2 个单选按钮，第二次迭代生成 2 个单选按钮。如果我在第一部分中选择一个单选按钮，那么第二个选择中的一个单选按钮也会被选中。我想要两个包含 2 个单选按钮的部分，每个单选按钮不反映彼此的变化。任何帮助请

 <div ng-controller="MainCtrl" >
    <div data-ng-repeat="choic in choice"  >
    <form >
  <input ng-model="parent.mustShow"  class="label_align" type="radio"          name="customer" value="no"  ><div class="mediumSubhead"> Information housed         </div><br/>
   <input ng-model="parent.mustShow"  class="label_align" type="radio"   name="customer" value="yes" >
 <div class="mediumSubhead"> Information housed   outside </div></form>
</div> 
 </div>
Controller.js
 var app = angular.module('EquityCompensation', []);
 app.controller('MainCtrl', function($scope) {
 $scope.choice = [{id: 'choic1'},{id: 'choic2'}];
 });

Answer 1

我建议您将 mustShow 变量放在选择数组中。这样可以帮助您跟踪每个元素。这将使您的 ng-model 声明为ng-model="choic.mustShow"

要显示外部输入元素，您可以使用过滤器检查任何选项是否有mustShow 选项被勾选，然后显示输入元素。

标记

<div data-ng-repeat="choic in choice">
  <form>
    <input ng-model="choic.mustShow" class="label_align" type="radio" name="customer" value="no">
    <div class="mediumSubhead"> Information housed </div>
    <br/>
    <input ng-model="choic.mustShow" class="label_align" type="radio" name="customer" value="yes">
    <div class="mediumSubhead"> Information housed outside </div>
  </form>
</div>
<div ng-show="(choice | filter: {mustShow: 'yes'}).length > 0">
  <input name="first_name" class="text_box_space" type="text" value="" style="color: black;" size="25" width="200px">
</div>

Demo Plunkr