English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

دليل أساسي لـ AngularJS

اختيار لـ AngularJS (Select Box)

يمكن لـ AngularJS إنشاء قائمة منسدلة باستخدام قائمة أو ملف.

استخدام ng-options لإنشاء مربع اختيار

في AngularJS يمكننا استخدام ng-option التعليمات لإنشاء قائمة منسدلة، حيث يتم عرض عناصر القائمة عن طريق التكرار على الأشياء والقوائم، مثل المثال التالي:

مثال عبر الإنترنت

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

ng-init لضبط القيمة المحددة مسبقًا.

ng-options و ng-repeat

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

مثال عبر الإنترنت

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

ng-repeat تعليمات ng-repeat تكرر HTML باستخدام جداول، لكن ng-options تعليمات أكثر ملاءمة لإنشاء قائمة منسدلة، ولديها المزايا التالية:

استخدام ng-options خياراته كائن، ng-repeat هو نص.

هل يجب أن نستخدم الأفضل؟

افترض أن نستخدم الكائن التالي:

$scope.sites = [
　　　　{site: "Google", url: "http://www.google.com"},
　　　　{site: "w3codebox", url: "http://ar.oldtoolbag.com"},
　　　　{site: "Taobao", url: "http://www.taobao.com"}
;

ng-repeat لديه قيود، حيث يكون القيمة المختارة نص:

مثال عبر الإنترنت

استخدام ng-repeat:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>اختر موقع:</p>
<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>
<h1>لقد اخترت: {{selectedSite}}</h1>
</div>
<script>
var　app　=　angular.module('myApp',　[]);
app.controller('myCtrl',　function($scope)　{
　　　$scope.sites = [
　　　　　　　　{site: "Google", url: "http://www.google.com"},
　　　　　　　　{site: "w3codebox", url: "http://ar.oldtoolbag.com"},
　　　　　　　　{site: "Taobao", url: "http://www.taobao.com"}
　　　　;
});
</script>
<p>يظهر هذا المثال كيفية استخدام تعليمات ng-repeat لإنشاء قائمة منسدلة، حيث يكون القيمة المختارة نص.</p>
</body>
</html>
اختبار لرؤية ‹/›

استخدام ng-options تعليمات، حيث يكون القيمة المختارة كائن:

مثال عبر الإنترنت

استخدام ng-options:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>اختر موقع:</p>
<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>
<h1>لقد اخترت: {{selectedSite.site}}</h1>
<p>عنوان الموقع: {{selectedSite.url}}</p>
</div>
<script>
var　app　=　angular.module('myApp',　[]);
app.controller('myCtrl',　function($scope)　{
　　　$scope.sites = [
　　　　　　　　{site: "Google", url: "http://www.google.com"},
　　　　　　　　{site: "w3codebox", url: "http://ar.oldtoolbag.com"},
　　　　　　　　{site: "Taobao", url: "http://www.taobao.com"}
　　　　;
});
</script>
<p>يظهر هذا المثال كيفية استخدام تعليمات ng-options لإنشاء قائمة منسدلة، حيث يكون القيمة المختارة كائن.</p>
</body>
</html>
اختبار لرؤية ‹/›

عندما يكون القيمة المختارة هي كائن، يمكننا الحصول على معلومات أكثر، وتطبيق أكثر مرونة.

مصدر البيانات هو جسم

في المثال السابق استخدمنا اللائحة كنوع بيانات المصدر، وسنستخدم جسم البيانات كمصدر بيانات فيما يلي.

$scope.sites = {
　　　　site01 : "Google",
　　　　site02 : "w3codebox",
　　　　site03 : "Taobao"
};

ng-options استخدام الجسم له فرق كبير، مثل ما يلي:

مثال عبر الإنترنت

استخدام الجسم كنوع بيانات المصدر: x للمفتاح (key):y للقيمة (value):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>الwebsite المختارة هي:</p>
<select ng-model="selectedSite" ng-options="x for (x, y) in sites">
</select>
<h1>القيمة التي اخترتها هي: {{selectedSite}}</h1>
</div>
<p>هذا المثال يوضح استخدام الجسم كيُ创建 قائمة منسدلة.</p>
<script>
var　app　=　angular.module('myApp',　[]);
app.controller('myCtrl',　function($scope)　{
　　　　$scope.sites = {
　　　　　　　　site01 : "Google",
　　　　　　　　site02 : "w3codebox",
　　　　　　　　site03 : "Taobao"
　　　　};
});
</script>
</body>
</html>
اختبار لرؤية ‹/›

القيمة التي اخترتها في المفتاح-القيمة في الجسم القيمة.

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

مثال عبر الإنترنت

القيمة المختارة في المفتاح-القيمة صحيح القيمة ، هذا هو أنه جسم:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>اختر سيارة:</p>
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>لقد اخترت: {{selectedCar.brand}}</h1>
<h2>النموذج: {{selectedCar.model}}</h2>
<h3>اللون: {{selectedCar.color}}</h3>
<p>لاحظ أن القيمة المختارة هي جسم.</p>
</div>
<script>
var　app　=　angular.module('myApp',　[]);
app.controller('myCtrl',　function($scope)　{
　　　　$scope.cars　=　{
　　　　　　　　car01　:　{brand　:　"Ford",　model　:　"Mustang",　color　:　"red"},
　　　　　　　　car02　:　{brand　:　"Fiat",　model　:　"500",　color　:　"white"},
　　　　　　　　car03　:　{brand　:　"Volvo",　model　:　"XC90",　color　:　"black"}
　　　　}
});
</script>
</body>
</html>
اختبار لرؤية ‹/›

يمكنك أيضًا عدم استخدامها في القائمة المنسدلةالمفتاح- القيمة في 　المفتاح , استخدم خصائص الجسم مباشرة:

مثال عبر الإنترنت

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>اختر سيارة:</p>
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"></select>
<p>لقد اخترت: {{selectedCar.brand}}</p>
<p>نموذج: {{selectedCar.model}}</p>
<p>لون: {{selectedCar.color}}</p>
<p>يمكن أن تكون أيضًا خصائص الظواهر في القائمة المنسدلة.</p>
</div>
<script>
var　app　=　angular.module('myApp',　[]);
app.controller('myCtrl',　function($scope)　{
　　　　$scope.cars　=　{
　　　　　　　　car01　:　{brand　:　"Ford",　model　:　"Mustang",　color　:　"red"},
　　　　　　　　car02　:　{brand　:　"Fiat",　model　:　"500",　color　:　"white"},
　　　　　　　　car03　:　{brand　:　"Volvo",　model　:　"XC90",　color　:　"black"}
　　　　}
});
</script>
</body>
</html>
اختبار لرؤية ‹/›

　 　 　 　 　 　 　 　 　 　 　 　 　 　

دليل مرجعي لـ AngularJSHttp لـ AngularJS