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

时间:2015-08-22 21:25:43

标签: html angularjs radio-button angularjs-ng-repeat angularjs-controller

我需要一个四个单选按钮。第一次迭代生成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'}];
 });

1 个答案:

答案 0 :(得分: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