0

私は次のような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>

これは機能します。配列には、インデックスの 1 つにextraFieldwith 値があります。設定のあるラジオボタンがチェックtrueされているときに追加の入力フィールドを表示するには、Angular が必要です。extraField配列は、値を持つ複数のインデックスを持つように変更される場合がありextraFieldます。

したがって、余分なフィールドは次のようになります。

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

を使用することを知っている以外にng-show、これを行う正しい方法が何であるかはわかりません。もちろん、上記の例は何もしません。

4

4 に答える 4

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

置き場

スコープ上のオブジェクトにプロパティとして設定する必要があることを除いて、選択されたものを追跡するために使用することもできhowManyます (ng-repeat は独自の子スコープを作成し、proto 継承が機能するため)。

したがって、ラジオに を追加ng-model="option.howMany"し、コントローラーに を追加$scope.option = { };し、テキスト ボックスにng-if="quantity.extraField" ng-show="quantity.snippet === option.howMany"

置き場

于 2014-07-30T22:39:19.490 に答える
0

ラジオボタンがチェックされているときに何かを表示する最も簡単な方法は次のとおりです。

次のラジオグループがあるとします。ng-model="radio-values"

value="radio-value1"入力を表示または非表示にするには、radio-group:内の値に依存します。value="radio-value2"

最終的に入力フィールドを表示または非表示にするには (「radio-value1」が設定されている場合に何かを表示したいとします)、次のようにします。 <input ng-show="radio-values == 'radio-value1'" ...>

于 2016-09-09T08:03:40.620 に答える
0

プランカーがあれば...それなしでこれを試してください

<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>
于 2014-07-30T22:28:47.220 に答える