AngularJS يتيح لك إنشاء قوائم المنسدلة استنادا إلى بنود في صفيف، أو كائن.
إنشاء صندوق اختر عن طريق نانوغرام الخيارات
إذا كنت ترغب في إنشاء قائمة منسدلة، استنادا إلى كائن أو مجموعة في AngularJS، يجب عليك استخدام ng-option التوجيه:
مثال
<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-repeat التوجيه لجعل نفس القائمة المنسدلة:
لأن ng-repeat التوجيه يعيد كتلة من التعليمات البرمجية HTML لكل عنصر في مجموعة، فإنه يمكن أن تستخدم لخلق خيارات في القائمة المنسدلة، ولكن ng-options تم توجيه خاصة لملء قائمة منسدلة مع الخيارات، ولديه واحد على الأقل ميزة هامة:
القوائم المنسدلة المصنوع من ng-options تسمح القيمة المحددة ليكون كائن، في حين القوائم المنسدلة مصنوعة من ng-repeat يجب أن تكون سلسلة.
ما يمكنني استخدام؟
تفترض لديك مجموعة من الأشياء:
$scope.cars = [
{model : "Ford Mustang", color :
"red"},
{model : "Fiat 500", color : "white"},
{model : "Volvo XC90", color : "black"}
]; و ng-repeat التوجيه يتلقى هو المقيد، يجب أن تكون القيمة المحددة سلسلة:
مثال
باستخدام ng-repeat :
<select ng-model="selectedCar">
<option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1>You selected: {{selectedCar}}</h1>
انها محاولة لنفسك » عند استخدام ng-options التوجيه، يمكن أن تكون القيمة المحددة كائن:
مثال
باستخدام ng-options :
<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>You selected: {{selectedCar.model}}</h1>
<p>It's color is: {{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>You selected: {{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"}
};
انها محاولة لنفسك » الخيارات في القائمة المنسدلة لايوجد يكون المفتاح في زوج -value الرئيسي، فإنه يمكن أيضا أن تكون القيمة، أو خاصية الكائن قيمة:
مثال
<select ng-model="selectedCar" ng-options=" y.brand for (x, y) in cars">
</select>
انها محاولة لنفسك »