Javascript 选中收音机时显示输入

我有一个javascript数组，如下所示：

$scope.quantityMachines = [
  { 'snippet' : 'One' },
  { 'snippet' : 'Two' },
  { 'snippet' : 'Three or more',
    'extraField' : true },
  { 'snippet' : 'Not sure, need advice' }
];

然后我有一个由Angular JS使用数组生成的单选按钮列表：

<ul>
  <li ng-repeat="quantity in quantityMachines">
    <input type="radio" id="quantityMachines{{$index}}" name="quantityMachines" value="{{quantity.snippet}}" ng-model="howMany" />
    <label for="quantityMachines{{$index}}">{{quantity.snippet}}</label>
  </li>
</ul>

---

除了知道如何使用

ng show

，我不确定正确的方法是什么。上面的例子当然没有任何作用。

如果你有一个plunker…如果没有它，试试这个

<ul>
  <li ng-repeat="quantity in quantityMachines">
    <input type="radio" id="quantityMachines{{$index}}" name="quantityMachines" 
        value="{{quantity.snippet}}" ng-model="howMany" />
    <label for="quantityMachines{{$index}}">{{quantity.snippet}}</label>
    <input type="text" ng-model="extraInfo" **ng-if="quantity.extraField"** />
  </li>
</ul>

{{quantity.snippet}

{{quantity.snippet}

您可以使用

ng if

和

ng show

组合和范围变量来跟踪所选内容。ng if将确保文本框不会意外添加到DOM中，并在切换收音机时显示和隐藏ng show

在您的输入中：-

<input type="text" ng-model="extraInfo" ng-if="quantity.extraField" ng-show="option.selected === howMany" />

并在控制器中添加：-

$scope.option = { selected:'none'};

您甚至可以使用

howMany

来跟踪所选内容，但您需要将其设置为作用域上对象的属性（因为ng repeat创建了自己的子作用域，而proto继承开始发挥作用）

因此，在您的收音机中只需添加

ng model=“option.howMany”

，在控制器中添加

$scope.option={}和文本框中的
ng if=“quantity.extraField”ng show=“quantity.snippet===option.howMany”

选中单选按钮时显示内容的最简单方法如下：

假设您有一个无线组：
ng model=“radio values”

要显示或隐藏输入，则取决于无线电组中的值：
value=“radio-value1”
，
value=“radio-value2”

要最终显示或隐藏输入字段（假设如果设置了“radio-value1”，则要显示某些内容），请执行以下操作：
这似乎会生成输入，但我需要它仅在选中相关单选按钮时显示新输入。是的@PSL的答案很好。我想知道为什么要看电视？如果“quantity.extraField&&option.selected===howMany”与ng单击一起就足够了吗？是的，就是这样@如果列表只绑定了一次多少，那么您可以这样使用：-我想知道有没有办法将文本输入移出重复循环，这样它就可以位于整个列表下面？当我把它移出去的时候，它打破了密码。太棒了！希望我能给你更多的投票。谢谢
<input type="text" ng-model="extraInfo" ng-if="quantity.extraField" ng-show="option.selected === howMany" />

<ul>
  <li ng-repeat="quantity in quantityMachines">
    <input type="radio" id="quantityMachines{{$index}}" name="quantityMachines" value="{{quantity.snippet}}" ng-model="howMany" ng-click="option.selected=quantity.snippet"/>
    <label for="quantityMachines{{$index}}">{{quantity.snippet}}</label>
    <input type="text" ng-model="extraInfo" ng-if="quantity.extraField" ng-show="option.selected === howMany" />
  </li>
</ul>

$scope.option = { selected:'none'};