نافذة اختيار AngularJS

يسمح AngularJS بإنشاء قائمة منسدلة بناءً على العناصر في المجموعة أو العنصر في المجموعة.

إنشاء نافذة اختيار باستخدام ng-options

إذا كنت ترغب في إنشاء قائمة منسدلة في AngularJS بناءً على العنصر أو المجموعة، يجب عليك استخدام ng-options تعليمات:

مثال

<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.names = ["Emil", "Tobias", "Linus"];
);
</script>

تجربة شخصية

ng-options مع ng-repeat

يمكنك أيضًا استخدام ng-repeat تعليمات لإنشاء نفس القائمة المنسدلة:

مثال

<select>
  <option ng-repeat="x in names">{{x}}</option>
</select>

تجربة شخصية

بسبب ng-repeat تعليمة تكرر نفس كود HTML لكل عنصر في المجموعة، لذا يمكن استخدامها لإنشاء خيارات في القائمة المنسدلة، ولكن ng-options تعليمات مصممة خصيصًا لتعبئة خيارات القائمة المنسدلة.

ما يجب استخدامها؟

يمكنك استخدام ng-repeat تعليمات و ng-options تعليمات:

افترض أن لديك مصفوفة كائنات:

$scope.cars = [
  {model : "Ford Mustang", color : "red"},
  {model : "Fiat 500", color : "white"},
  {model : "Volvo XC90", color : "black"}
];

مثال

استخدام ng-repeat：

<select ng-model="selectedCar">
  <option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1>لقد اخترت: {{selectedCar}}</h1>

تجربة شخصية

عندما تستخدم القيمة ككائن، استخدم ng-value ب value：

مثال

استبدال ng-repeat استخدام ك كائن:

<select ng-model="selectedCar">
  <option ng-repeat="x in cars" ng-value="{{x}}">{{x.model}}</option>
</select>
<h1>لقد اخترت {{selectedCar.color}} {{selectedCar.model}}</h1>

تجربة شخصية

مثال

استخدام ng-options：

<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>لقد اخترت: {{selectedCar.model}}</h1>
<p>لونها هو: {{selectedCar.color}}</p>

تجربة شخصية

عندما يكون القيمة المحددة كائنًا، يمكن أن يحتوي على معلومات إضافية، مما يجعل تطبيقك أكثر مرونة.

سنستخدمها في هذا الدليل. ng-options تعليمات.

ك مصدر البيانات للكائن

في المثال السابق، كان مصدر البيانات هو مصفوفة، لكن يمكننا أيضًا استخدام الكائن.

افترض أن لديك كائن يحتوي على المفتاح القيمة:

$scope.cars = {
  car01 : "Ford",
  car02 : "Fiat",
  car03 : "Volvo"
};

ng-options تعبر العبارات داخل الخاصية عن الكائن بشكل مختلف قليلًا:

مثال

استخدام الكائن ك مصدر البيانات،x تمثل المفتاح،y تمثل القيمة:

<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>لقد اخترت: {{selectedCar}}</h1>

تجربة شخصية

القيمة المحددة ستكون دائمًا داخل المفتاح القيمةقيمة.

المفتاح القيمة فيقيمةيمكن أن يكون أيضًا كائنًا:

مثال

القيمة المحددة ستظل تكون داخل المفتاح القيمةقيمة، ولكن هذه المرة هو هدف:

$scope.cars = {
  car01 : {brand : "Ford", model : "Mustang", color : "red"},
  car02 : {brand : "Fiat", model : "500", color : "white"},
  car03 : {brand : "Volvo", model : "XC90", color : "black"}
};

تجربة شخصية

لا يجب أن تكون الخيارات في القائمة المنسدلة جزءًا من مفتاح القيمةالمفتاح، يمكن أن يكون أيضًا قيمة أو خاصية قيمة لقيمة:

مثال

<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>

تجربة شخصية