يعرض Angular JS الإدخال عند فحص الراديو

Question

لدي مجموعة جافا سكريبت مثل ذلك:

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

سلة مهملات

يمكنك حتى استخدام howMany لتتبع ما تم تحديده باستثناء أنك تحتاج إلى تعيينه كخاصية لكائن في النطاق (نظرًا لأن ng-repeat ينشئ نطاقًا فرعيًا خاصًا به ويبدأ تشغيل الميراث الأولي).

حتى في الراديو الخاص بك فقط أضف ng-model="option.howMany", ، في وحدة التحكم الخاصة بك أضف $scope.option = { }; وفي مربع النص ng-if="quantity.extraField" ng-show="quantity.snippet === option.howMany"

سلة مهملات

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

Answer 4

أسهل طريقة لإظهار شيء ما عند تحديد زر الاختيار هي ما يلي:

لنفترض أن لديك مجموعة راديو تضم: ng-model="radio-values"

لإظهار أو إخفاء مدخلاتك يعتمد ذلك على القيم الموجودة في مجموعة الراديو: value="radio-value1", value="radio-value2"

لإظهار حقل الإدخال أو إخفائه أخيرًا (لنفترض أنك تريد إظهار شيء ما إذا تم تعيين "قيمة الراديو 1")، عليك القيام بما يلي:<input ng-show="radio-values == 'radio-value1'" ...>