AngularJS انڈر لین لسٹ

AngularJS آپ کو آرائی یا اشیاء کی بنیاد پر انڈر لین لسٹ بنانے کی اجازت دیتا ہے۔

ng-options کا استعمال کرسکتے ہیں تاکہ انڈر لین لسٹ بنائیں

اگر آپ خواہش رکھتے ہیں کہ آپ کسی اشیاء یا آرائی کی بنیاد پر انڈر لین لسٹ بنائیں تو آپ کو 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 این آمر ہر پروجیکٹ کیلئے ایک براہ راست ایچ تی ایم ال کو تکرار کرتا ہے، لہذا یہ انڈر لین لسٹ میں آپشن بنانے کیلئے استعمال کیا جاسکتا ہے، لیکن 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>

خود کو چھپائیئے