AngularJS حدد المربعات
يتيح لك AngularJS إنشاء قوائم منسدلة بناءً على عناصر في مصفوفة أو كائن.
إنشاء مربع اختيار باستخدام خيارات ng
إذا كنت تريد إنشاء قائمة منسدلة ، بناءً على كائن أو مصفوفة في 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-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>You selected: {{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>You selected a {{selectedCar.color}} {{selectedCar.model}}</h1>
مثال
باستخدام ng-options:
<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>You selected: {{selectedCar.model}}</h1>
<p>Its 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"}
};
لا يجب أن تكون الخيارات الموجودة في القائمة المنسدلة هي المفتاح في زوج قيمة المفتاح ، بل يمكن أن تكون أيضًا قيمة أو خاصية كائن القيمة:
مثال
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>