[英]Angular JS show input when radio checked
I have a javascript array like so: 我有一个像这样的javascript数组:
$scope.quantityMachines = [
{ 'snippet' : 'One' },
{ 'snippet' : 'Two' },
{ 'snippet' : 'Three or more',
'extraField' : true },
{ 'snippet' : 'Not sure, need advice' }
];
Then I have a list of radio buttons generated by Angular JS using the array: 然后我有一个由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>
This works. 这可行。 In the array there is an
extraField
with value true
in one of the indexes. 在数组中,其中一个索引中有一个值为
true
的extraField
。 I need Angular to show an extra input field when a radio button with the extraField
setting is checked. extraField
带有extraField
设置的单选按钮时,我需要Angular显示一个额外的输入字段。 The array may change to have more than one index with the extraField
value. 该数组可能会更改为具有
extraField
值的多个索引。
So the extra field would look something like this. 因此,多余的字段看起来像这样。
<input type="text" ng-model="extraInfo" ng-show="howMany" />
Other than knowing to use ng-show
, I'm not sure what would be the correct way to do this. 除了知道使用
ng-show
,我不确定执行此操作的正确方法。 The above example of course does nothing. 上面的示例当然不起作用。
You could use ng-if
and ng-show
combination and a scope variable to keep track what is selected. 您可以使用
ng-if
和ng-show
组合以及范围变量来跟踪所选内容。 ng-if will make sure the textbox is not added unwantedly to the DOM and ng-show to show and hide as the radio gets toggled. ng-if将确保文本框不会不必要地添加到DOM和ng-show中,以在切换收音机时显示和隐藏。
In your input:- 在您的输入中:-
<input type="text" ng-model="extraInfo" ng-if="quantity.extraField" ng-show="option.selected === howMany" />
and in your Radio add ng-click="option.selected=quantity.snippet"
然后在您的Radio中添加
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>
and add in your controller:- 并添加您的控制器:
$scope.option = { selected:'none'};
You could even use howMany
to track what was selected except that you need to set it as a property to an object on the scope (Since ng-repeat creates its own child scope and proto inheritance comes to play). 您甚至可以使用
howMany
来跟踪选定的内容,只是需要将其设置为作用域上对象的属性(因为ng-repeat创建了自己的子作用域,并且继承了原始继承)。
So in your radio just add ng-model="option.howMany"
, in your controller add $scope.option = { };
因此,在您的无线电中只需添加
ng-model="option.howMany"
,在您的控制器中添加$scope.option = { };
and in the text box ng-if="quantity.extraField" ng-show="quantity.snippet === option.howMany"
并在文本框中
ng-if="quantity.extraField" ng-show="quantity.snippet === option.howMany"
If only you had a plunker...without that try this 如果只有一个矮胖的人...没有尝试
<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>
http://jsbin.com/biwah/1/edit?html,js,output 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>
The easiest way to show something when radio button is checked is the following: 选中单选按钮时显示内容的最简单方法是:
Lets say you have a radio-group with: ng-model="radio-values"
假设您有一个广播组,其名称为:
ng-model="radio-values"
To show or hide your input then depends on the values within the radio-group: value="radio-value1"
, value="radio-value2"
要显示或隐藏您的输入,则取决于单选组中的
value="radio-value1"
: value="radio-value1"
, value="radio-value2"
To finally show or hide the input field (lets say you want to show something if "radio-value1" is set) you do: <input ng-show="radio-values == 'radio-value1'" ...>
要最终显示或隐藏输入字段(假设设置了“ radio-value1”,则要显示某些内容),您可以执行以下操作:
<input ng-show="radio-values == 'radio-value1'" ...>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.