选中单选时，Angular JS显示输入

debugcn 发表于 Dev

驯鹿代码

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

这行得通。在数组中，其中一个索引中包含一个extraFieldwith值true。我需要角度展现一个额外的输入字段时用一个单选按钮extraField设置检查。该数组可能会更改为具有多个索引extraField值。

因此，多余的字段看起来像这样。

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

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

PSL

您可以结合使用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'};

箱子

您甚至可以howMany用来跟踪选定的内容，只是需要将其设置为作用域上对象的属性（因为ng-repeat创建了自己的子作用域，并且继承了原始继承）。

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

箱子

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。