it-swarm.asia

الزاوي ، القيمة المنطقية في مربع التحديد

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

<select class="span9" ng-model="proposal.formalStoryboard">
<option value="false">Not Included</option>
<option value="true">Included</option>
</select>

يتم تعيين القيمة (propos.formalStoryboard) بشكل صحيح على صواب أو خطأ ولكن لا ينعكس التغيير في مربع الاختيار عندما يتم تعيين القيمة بالفعل.

لقد جربت ng-value = "true" و ng-value = "false" بدلاً من القيمة فقط ولكنها لا تعمل أيضًا.

64
Jerome Ansia

تحرير: أشار المعلقون إلى أن الحل الأصلي لم ينجح كما ادعى. لقد قمت بتحديث الإجابة لتعكس الإجابة الصحيحة المقدمة من الآخرين أدناه (لا يمكنني حذف إجابة مقبولة).

بالنسبة إلى Angular 1.0.6 ، ضع في الاعتبار HTML هذا:

<div ng-app="">
  <div ng-controller="MyCntrl">
    <select ng-model="mybool"
            ng-options="o.v as o.n for o in [{ n: 'Not included', v: false }, { n: 'Included', v: true }]">
    </select>
    <p>
        Currently selected: <b>{{ mybool }}</b> opposite: {{ !mybool }}
   </p> 
 </div>
</div>

وهذا جافا سكريبت:

function MyCntrl($scope) {
    $scope.mybool = true;
}

فيما يلي work DEMO for Angular 1.0.6 وهنا هو work DEMO for Angular 1.3.14 ، وهو مختلف قليلاً .

79
ChrisP

فقط تفعل مثل هذا:

<select ng-model="someModel" ng-options="boolToStr(item) for item in [true, false]">
</select>

و حدد:

$scope.boolToStr = function(arg) {return arg ? 'Included' : 'Not included'};
58
ricofe25

لماذا لا تستخدم هذا فقط؟

<select class="form-control" ng-options="(item?'Included':'Not Included') for item in [true, false]"></select>
32
Thiago Passos

لست متأكدًا من إصدار الزاوي الذي أصبح مدعومًا فيه ، لكن يمكنك الآن استخدام ng-value في عنصر الخيار. أتش تي أم أل الخاص بك ستعمل مثل هذا.

<select ng-model="proposal.formalStoryboard">
    <option ng-value="true">Included</option>
    <option ng-value="false">Not Included</option>
</select>

كما أنه يعمل على الراديو وخانات الاختيار.

4
Kieran

أنا خلقت عينة لك ، يرجى مراجعة هذا خارج.

هل هو ما تريد استخدام النموذج لدفع ربط واجهة المستخدم؟

<div ng-app ng-controller="Ctrl">
    <select class="span9" ng-model="proposal.formalStoryboard">
        <option value="false">Not Included</option>
        <option value="true">Included</option>
    </select>
    <button ng-click="changeValue();">Click</button>
<div>

function Ctrl($scope) {
    $scope.proposal = {};
    $scope.proposal.formalStoryboard = true;

    $scope.changeValue = function () {
        $scope.proposal.formalStoryboard = !$scope.proposal.formalStoryboard;
        console.log($scope.proposal.formalStoryboard);
    }
}
1
zs2020

أود أن أوصي باستخدام التوجيه لهذا. كالمعتاد ، أحاول الابتعاد عن المهلات والعمليات المتزامنة الأخرى في تفضيل تحكم أكثر موثوقية ومباشرة.

directives.directive('boolean', function() {
  return {
    priority: '50',
    require: 'ngModel',
    link: function(_, __, ___, ngModel) {
      ngModel.$parsers.Push(function(value) {
        return value == 'true' || value == true;
      });

      ngModel.$formatters.Push(function(value) {
        return value && value != 'false' ? 'true' : 'false';
      });
    }
  };
});

يتم تعيين الأولوية على وجه التحديد بحيث يتم ذلك قبل أي توجيهات أخرى (التي عادة لا تحتوي على مجموعة أولوية ، والقيمة الافتراضية لـ 0)

على سبيل المثال ، أستخدم هذا التوجيه (لاختيار صواب/خطأ) مع توجيهي selectpicker الذي يلف عناصر select في المكون الإضافي selectpicker bootstrap.

تصحيح:

التحذير هنا ، الذي نسيت أن أذكره ، هو أن قيم html يجب أن تكون قيم سلسلة. يتم ترجمة ما يقوم به التوجيه بين العرض والنموذج ، مع الحفاظ على قيمة النموذج بـ boolean وطريقة العرض الخاصة بك بتنسيق string:

%select.selectpicker{ ng: { model: 'modelForm.listed' }, selectpicker: '{ }', boolean: true }
  %option{ value: 'true' } Listed
  %option{ value: 'false' } Unlisted
1
Volte

هذا سوف يعمل ايضا. فقط فرض القيمة لتكون منطقية عن طريق وضع تعبير الزاوي في القيمة.

<select class="span9" ng-model="proposal.formalStoryboard">
    <option value="{{false}}" 
           ng-selected="proposal.formalStoryboard === false">
           Not Included
    </option>
    <option value="{{true}}"
            ng-selected="proposal.formalStoryboard === true">
            Included
    </option>
</select>
1
suh

يقوم الزاوي بإجراء مقارنة صارمة بين القيمة المرتبطة بنموذج ng والقيم الموجودة في الخيارات المحددة. القيم المعطاة في السؤال الأولي هي السلاسل "false" و "true". إذا كانت قيمة ng-model عبارة عن Type bool وتم تعريفها مثل {"Value": false} ، فلن يتطابق Angulars === التقارب بين السلسلة و bool حتى لا يكون مربع التحديد فارغًا.

المشكلة الحقيقية هي - إذا قمت بتحديد قيمة ، فإن النوع الذي تم تغييره من منطقي إلى سلسلة ({"القيمة": خطأ} -> {"القيمة": "خطأ"}) يمكن أن يتسبب في حدوث أخطاء في حالة إعادة النشر.

أفضل حل لكلا المسألتين هو حل Thiago Passos في هذا المنشور. ( https://stackoverflow.com/a/31636437/6319374 )

0
zlit

لم أحقق نجاحًا كبيرًا في هذه القضية المحبطة. حل بلدي ، رغم أنه ليس أنيقًا جدًا ، لأنه سطر إضافي من التعليمات البرمجية ، قم بحله في كل مرة. هذا قد لا يعمل في كل تطبيق.

$scope.myObject.myBooleanProperty = $scope.myObject.myBooleanProperty.toString();

إن تحويلها إلى سلسلة "حقيقية" قبل محاولة إعادة ربطها بالنموذج المعروض على الصفحة سمح لها بتحديد القيمة بشكل صحيح.

0
Tony Basallo