检查无线电时Angular JS显示输入答案

【问题标题】：Angular JS show input when radio checked检查无线电时Angular JS显示输入
【发布时间】：2016-09-09 16:03:40
【问题描述】：

我有一个这样的 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>

这行得通。在数组中有一个extraField，其中一个索引中的值为true。当检查带有 extraField设置的广播按钮时，我需要Angular显示一个额外的输入字段。该数组可能会更改为具有多个具有extraField 值的索引。

所以额外的字段看起来像这样。

<input type="text" ng-model="extraInfo" ng-show="howMany" />

除了知道使用ng-show 之外，我不确定执行此操作的正确方法是什么。上面的例子当然什么也没做。

【问题讨论】：

标签： javascript html angularjs ng-show

【解决方案1】：

您可以使用ng-if 和ng-show 组合以及范围变量来跟踪所选内容。 ng-if 将确保文本框不会被不必要地添加到 DOM 中，并且 ng-show 会在收音机切换时显示和隐藏。

在您的输入中：-

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

并在您的收音机中添加ng-click="option.selected=quantity.snippet"

<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'};

Bin

您甚至可以使用howMany 来跟踪选择的内容，除非您需要将其设置为范围内对象的属性（因为 ng-repeat 创建了自己的子范围并开始使用原型继承）。

因此，只需在您的收音机中添加ng-model="option.howMany"，在您的控制器中添加$scope.option = { };，然后在文本框中添加ng-if="quantity.extraField" ng-show="quantity.snippet === option.howMany"

Bin

【讨论】：

是的，就是这张票！
@Cooper 如果列表中只绑定了一次 howmany，那么您可以像这样使用它：- jsbin.com/yepezoyu/1/edit
我想知道有没有办法将文本输入移出重复循环，以便它可以位于整个列表下方？当我现在将其移出时，它会破坏代码。
太棒了！希望我能给你更多的赞成票。谢谢

【解决方案2】：

如果你有一个 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>

【讨论】：

这似乎会生成输入，但我需要它仅在选中相关单选按钮时显示新输入。
是的。 @PSL 的答案可以正常工作。我想知道为什么 ng-show ？ ng-if="quantity.extraField && option.selected === howMany" 是否足以与 ng-click 一起使用？

【解决方案3】：

http://jsbin.com/biwah/1/edit?html,js,output

<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="quantity.extraInfo" ng-show="quantity.extraField" />
  </li>
</ul>

【讨论】：

【解决方案4】：

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

假设您有一个广播组：ng-model="radio-values"

显示或隐藏您的输入取决于无线电组中的值：value="radio-value1"、value="radio-value2"

要最终显示或隐藏输入字段（假设您想在设置“radio-value1”时显示某些内容），您可以： <input ng-show="radio-values == 'radio-value1'" ...>

【讨论】：