AngularJS ਵਿੱਚ ਡਰਾਪ-ਡਾਊਨ ਲਿਸਟ

AngularJS ਤਾਲਿਕਾ ਵਿੱਚ ਪ੍ਰੋਜੈਕਟ ਜਾਂ ਆਪਸਤਰਣ ਦੇ ਆਧਾਰ 'ਤੇ ਡਰਾਪ-ਡਾਊਨ ਲਿਸਟ ਬਣਾਉਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ。

ng-options ਨਾਲ ਡਰਾਪ-ਡਾਊਨ ਲਿਸਟ ਬਣਾਉਣਾ

ਅਗਰ ਤੁਸੀਂ AngularJS ਵਿੱਚ ਆਪਸਤਰਣ ਜਾਂ ਤਾਲਿਕਾ ਦੇ ਆਧਾਰ 'ਤੇ ਡਰਾਪ-ਡਾਊਨ ਲਿਸਟ ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ng-options instruksiyon:

مثال

<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 instruksiyon ਹਰ ਇਲਾਕੇ ਲਈ ਇੱਕ ਹੀ HTML ਕੋਡ ਦੁਹਰਾਉਂਦਾ ਹੈ, ਇਸ ਲਈ ਇਹ ਵਿਕਲਪ ਦਰਸਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ, ਪਰ ng-options instruksiyon ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਡਰਾਪ-ਡਾਊਨ ਲਿਸਟ ਵਿੱਚ ਵਿਕਲਪ ਭਰਨ ਲਈ ਡਿਜ਼ਾਇਨ ਕੀਤਾ ਗਿਆ ਹੈ。

ਕਿਹੜੀ ਇਸਤੇ ਵਰਤਣੀ ਚਾਹੀਦੀ ਹੈ?

ਤੁਸੀਂ ਇਸਤੇ ਵਰਤ ਸਕਦੇ ਹੋ ng-repeat instruksiyon aur ng-options instruksiyon:

ਇਕ ਵਾਰ ਤੁਸੀਂ ਇੱਕ ਆਪਣਾ ਆਰੇਯ ਹੈ:

$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>ਇਸ ਦਾ ਰੰਗ ਹੈ: {{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>

آپ خود بچار کریئن