AngularJS డౌను జాబితా

AngularJS అంశాలపై లేదా అంశాలులో ఆధారపడి డౌను జాబితా సృష్టించడానికి అనుమతిస్తుంది.

డౌను జాబితా సృష్టించడానికి ng-options ఉపయోగించండి

మీరు 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-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">
  ];
</select>
<h1>మీరు ఎంచుకున్నది: {{selectedCar}}</h1>

స్వయంగా ప్రయత్నించండి

<option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option> విలువను వస్తువుగా ఉపయోగించినప్పుడు, ఉపయోగించండి: ng-value ప్రతిస్థాయి వాడండి::

ఉదాహరణ

విలువను ng-repeat వస్తువుగా ఉపయోగించండి:

<select ng-model="selectedCar">
  <option ng-repeat="x in cars" ng-value="{{x}}">{{x.model}}</option>
</select>
<h1>మీరు ఎంచుకున్నది a {{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>

స్వయంగా ప్రయత్నించండి