it-swarm.asia

AngularJS مشروط نانوغرام المعوقين لا إعادة تمكين

نظرًا لحقل إدخال النص معطلًا بشكل مشروط باستخدام ng-disabled="truthy_scope_variable" ، يعطل AngularJS الحقل أول مرة يتم تزوير متغير النطاق ، لكنه لا يمكّنه من إجراء تغييرات لاحقة. نتيجة لذلك ، يظل الحقل معطلاً. يمكنني فقط افتراض حدوث خطأ ما ، لكن سجل وحدة التحكم فارغ.

يرتبط متغير النطاق الصادق بنموذج زر الاختيار ولا يمكنني تغييره $watch ، لكن حقل الإدخال ng-disabled لا يعمل كما هو متوقع. لقد حاولت الاتصال يدويًا $apply ، لكن يبدو أن Angular تؤدي إلى تغييرات DOM.

في وحدة التحكم:

$scope.new_account = true

أزرار الراديو:

<input type="radio" ng-model="new_account" name="register"
 id="radio_new_account" value="true" />

<input type="radio" ng-model="new_account" name="register"
 id="radio_existing_account" value="false" />

حقل الإدخال المعطل المشروط:

<input type="password" ng-disabled="new_account" id="login-password"
 name="password" ng-model="password" />

إذا قمت في البداية بتعيين $scope.new_account = false ، فسيتم تعطيل الحقل ، ولكن لن تتم إعادة تمكينه أبدًا. لماذا يحدث هذا؟

37
Petrus Theron

هناك حل بديل متاح للاستخدام فقط

نانوغرام القيمة

 <input type="radio" ng-model="new_account" name="register"
 id="radio_new_account" ng-value="true" />

<input type="radio" ng-model="new_account" name="register"
 id="radio_existing_account" ng-value="false" />
      <input type="password" ng-disabled="new_account" id="login-password"
 name="password" ng-model="password" />
15
Ajay Beniwal

ذلك لأن سمات HTML هي دائمًا سلاسل ، لذلك في مثالك ، يقوم ngDisabled بتقييم سلسلة في كلتا الحالتين ("صواب" أو "خطأ").

لعلاج ، يجب عليك مقارنة النموذج مقابل قيمة السلسلة في ngDisabled:

ng-disabled="new_account == 'false'"

... أو استخدم مربع اختيار ، للحصول على القيمة المنطقية الفعلية:

<input type="checkbox" ng-model="existing_account" name="register" id="checkbox_new_account" />
<label for="checkbox_new_account">Is Existing Account</label>

Password:
<input type="password" ng-disabled="existing_account" name="password" ng-model="password" />

إليك PLNKR مع كلا الحلين.

32
Stewie

اعتبارًا من عام 2016 ، ستقوم القيم المرتبطة بتحديث واجهة المستخدم في Chrome و Firefox حتى عندما يكون المعوق ng صحيحًا ولكن ليس في Safari. في Safari عند استخدام ng-disabled ، لن يتم تحديث ui على الرغم من سيكون لعنصر الإدخال value القيمة المحدثة (راجع element.value بعد تغييره.)

في Safari لفرض تحديثات واجهة المستخدم مع ng-model أو ng-value توجيهات عليك استخدام ng-readonly بدلاً من تعطيل ng.

1
NoNameProvided