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">
  <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>

स्वयं अभिप्राय से प्रयोग करें