Jassif Team Institution

AngularJS செலக்ட் பாக்ஸ்கள்

AngularJS நீங்கள் ஒரு வரிசை அல்லது பொருளில் உள்ள உருப்படிகளின் அடிப்படையில் டிராப்பவுன் பட்டியல்களை உருவாக்க அனுமதிக்கிறது.

ng-options பயன்படுத்தி செலக்ட் பாக்ஸ் உருவாக்குதல்

நீங்கள் AngularJS இல் ஒரு பொருள் அல்லது வரிசையின் அடிப்படையில் ஒரு டிராப்பவுன் பட்டியலை உருவாக்க விரும்பினால், நீங்கள் ng-options டைரக்டிவ் ஐப் பயன்படுத்த வேண்டும்:

Example

<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 vs ng-repeat

நீங்கள் அதே டிராப்பவுன் பட்டியலை உருவாக்க ng-repeat டைரக்டிவ் ஐயும் பயன்படுத்தலாம்:

Example

<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"}
];

Example

ng-repeat ஐப் பயன்படுத்துதல்:

<select ng-model="selectedCar">
  <option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>

<h1>You selected: {{selectedCar}}</h1>

மதிப்பை ஒரு பொருளாகப் பயன்படுத்தும்போது, value க்குப் பதிலாக ng-value ஐப் பயன்படுத்தவும்:

Example

ஒரு பொருளாக 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>

Example

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>

தரவு மூலமாக ஒரு பொருள்

முந்தைய எடுத்துக்காட்டுகளில் தரவு மூலம் ஒரு வரிசையாக இருந்தது, ஆனால் நாம் ஒரு பொருளையும் பயன்படுத்தலாம்.

உங்களிடம் கீ-மதிப்பு ஜோடிகளுடன் ஒரு பொருள் உள்ளது என்று கருதுங்கள்:

$scope.cars = {
  car01 : "Ford",
  car02 : "Fiat",
  car03 : "Volvo"
};

ng-options பண்புக்கூறில் உள்ள வெளிப்பாடு பொருள்களுக்கு சற்று வித்தியாசமானது:

Example

தரவு மூலமாக ஒரு பொருளைப் பயன்படுத்துதல், x கீயைக் குறிக்கிறது, மற்றும் y மதிப்பைக் குறிக்கிறது:

<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>

<h1>You selected: {{selectedCar}}</h1>

தேர்ந்தெடுக்கப்பட்ட மதிப்பு எப்போதும் ஒரு கீ-மதிப்பு ஜோடியில் உள்ள மதிப்பாக இருக்கும்.

ஒரு கீ-மதிப்பு ஜோடியில் உள்ள மதிப்பும் ஒரு பொருளாக இருக்கலாம்:

Example

தேர்ந்தெடுக்கப்பட்ட மதிப்பு இன்னும் ஒரு கீ-மதிப்பு ஜோடியில் உள்ள மதிப்பாகவே இருக்கும், ஆனால் இந்த முறை அது ஒரு பொருள்:

$scope.cars = {
  car01 : {brand : "Ford", model : "Mustang", color : "red"},
  car02 : {brand : "Fiat", model : "500", color : "white"},
  car03 : {brand : "Volvo", model : "XC90", color : "black"}
};

டிராப்பவுன் பட்டியலில் உள்ள விருப்பங்கள் ஒரு கீ-மதிப்பு ஜோடியில் கீயாக இருக்க வேண்டியதில்லை, அது மதிப்பாகவோ அல்லது மதிப்புப் பொருளின் பண்பாகவோ இருக்கலாம்:

Example

<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>

பயிற்சிகள் மூலம் கற்றல்