AngularJS बॉक्स का चयन करें
AngularJS आपको किसी ऐरे या ऑब्जेक्ट में आइटम्स के आधार पर ड्रॉपडाउन सूचियां बनाने देता है।
एनजी-विकल्पों का उपयोग करके एक चयन बॉक्स बनाना
यदि आप 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-repeatआप समान ड्रॉपडाउन सूची बनाने के लिए निर्देश का भी उपयोग कर सकते हैं :
उदाहरण
<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"}
];
उदाहरण
का उपयोग करना 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>Its color is: {{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>