جافاسكريبت - تهيئة القائمة المنسدلة باستخدام AngularJS و ng-repeat

أنا أحاول جعل صندوق الاختيار يبدأ بخيار مُعبأ مسبقًا باستخدام ng-repeat في AngularJS 1.1.5. بدلاً من ذلك، يبدأ الصندوق دائمًا بدون أي خيار محدد. كما أنه يحتوي على خيار فارغ، وهو ما لا أريده. أعتقد أن هناك تأثيرًا جانبيًا لعدم اختيار أي شيء.

يمكنني جعل هذا يعمل باستخدام ng-options بدلاً من ng-repeat، لكنني أريد استخدام ng-repeat في هذه الحالة. على الرغم من أن المثال المبسط الذي أرفقته لا يظهر ذلك، إلا أنني أريد أيضًا تعيين سمة العنوان لكل خيار، ولا توجد طريقة للقيام بذلك باستخدام ng-options، على حد علمي.

لا أعتقد أن هذا مرتبط بمشكلة النطاق/الوراثة النمطية الشائعة في AngularJs. على الأقل لا أرى أي شيء واضح عند التفتيش في Batarang. بالإضافة إلى ذلك، عندما تختار خيارًا في القائمة باستخدام واجهة المستخدم، يتم تحديث النموذج بشكل صحيح.

إليك الـ HTML:

<body ng-app ng-controller="AppCtrl">
    <div>
        Operator is: {{filterCondition.operator}}
    </div>
    <select ng-model="filterCondition.operator">
       <option 
           ng-repeat="operator in operators" 
           value="{{operator.value}}"
       >
           {{operator.displayName}}
       </option>
    </select>
</body>

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

function AppCtrl($scope) {

    $scope.filterCondition={
        operator: 'eq'
    }

    $scope.operators = [
        {value: 'eq', displayName: 'equals'},
        {value: 'neq', displayName: 'not equal'}
     ]
}

JS Fiddle لهذا: http://jsfiddle.net/coverbeck/FxM3B/2/

الإجابة رقم 1

حسنًا. إذا لم ترغب في استخدام الطريقة الصحيحة ng-options، يمكنك إضافة خاصية ng-selected مع منطق تحقق شرطي لتوجيه option لجعل عملية التحديد المسبق تعمل.

<select ng-model="filterCondition.operator">
    <option ng-selected="{{operator.value == filterCondition.operator}}"
            ng-repeat="operator in operators"
            value="{{operator.value}}">
      {{operator.displayName}}
    </option>
</select>

عرض تجريبي يعمل

الإجابة رقم 2

لعنصر select، يوفر Angular التوجيه ng-options. يمنحك الإطار المحدد لإعداد الخيارات وتعيين الافتراضي. فيما يلي المثال المحدّث باستخدام ng-options الذي يعمل كما هو متوقع: http://jsfiddle.net/FxM3B/4/

تم تحديث HTML (يبقى الكود كما هو)

<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator}}</div>
<select ng-model="filterCondition.operator" ng-options="operator.value as operator.displayName for operator in operators">
</select>
</body>

الإجابة رقم 3

الحقيقة أن Angular يدرج عنصر خيار فارغ في القائمة المنسدلة هي أن كائن النموذج المرتبط به يأتي افتراضيًا بقيمة فارغة عند التهيئة.

إذا كنت تريد اختيار خيار افتراضي، فيمكنك على الأرجح تعيينه على النطاق في وحدة التحكم

$scope.filterCondition.operator = "your value here";

إذا كنت تريد عنصر نائب لخيار فارغ، فهذا ينجح بالنسبة لي

<select ng-model="filterCondition.operator" ng-options="operator.id as operator.name for operator in operators">
  <option value="">Choose Operator</option>
</select>