Angular JS показывает входные данные при проверке радиосвязи

Question

У меня есть массив 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 в одном из индексов.Мне нужен Angular, чтобы показать дополнительное поле ввода, когда переключатель с extraField настройка проверена.Массив может измениться, чтобы иметь более одного индекса с extraField ценность.

Таким образом, дополнительное поле будет выглядеть примерно так.

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

Кроме знания того, как пользоваться ng-show, Я не уверен, как было бы правильно это сделать.Приведенный выше пример, конечно, ничего не делает.

Answer 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

Answer 2

Если бы у вас был пулькер ... без этого попробуйте это

<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>

.

Answer 3

http://jsbin.com/biwah/1/edit?html,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>
    <input type="text" ng-model="quantity.extraInfo" ng-show="quantity.extraField" />
  </li>
</ul>

.

Answer 4

Самый простой способ показать что-то, когда переключатель проверяется, это следующее:

Позволяет сказать, что у вас есть радиогруппа с: ng-model="radio-values"

Чтобы показать или скрыть свой вход, затем зависит от значений в Radio Group: value="radio-value1", value="radio-value2"

Чтобы наконец-то показать или скрыть поле ввода (позволяет сказать, что вы хотите показать, если «Radio Value1» устанавливается), вы делаете: <input ng-show="radio-values == 'radio-value1'" ...>