javascript - मैं AngularJS 'ng-options में मान गुण कैसे सेट करूं?




(18)

ngOptions देखें

ngOptions (वैकल्पिक) - { comprehension_expression= } - निम्न में से किसी एक रूप में:

सरणी डेटा स्रोतों के लिए : label for value in array select as label for value in array label group by group for value in array select as label for value in array label group by group for value in array select as label group by group for value in array track by trackexpr label group by group for value in array select as label group by group for value in array track by trackexpr label group by group for value in array select as label group by group for value in array track by trackexpr ऑब्जेक्ट डेटा स्रोतों के लिए: label for (key , value) in object select as label for (key , value) in object label group by group for (key, value) in object select as label group by group for (key, value) in object label group by group for (key, value) in object select as label group by group for (key, value) in object label group by group for (key, value) in object select as label group by group for (key, value) in object label group by group for (key, value) in object select as label group by group for (key, value) in object

आपके मामले में, यह होना चाहिए

array = [{ "value": 1, "text": "1st" }, { "value": 2, "text": "2nd" }];

<select ng-options="obj.value as obj.text for obj in array"></select>

अद्यतन करें

AngularJS पर अपडेट के साथ, अभिव्यक्ति track by साथ select तत्व की value विशेषता के लिए वास्तविक मान सेट करना अब संभव है।

<select ng-options="obj.text for obj in array track by obj.value">
</select>

इस बदसूरत सामान को कैसे याद रखें

इस वाक्यविन्यास फ़ॉर्म को याद रखने के लिए कठिन समय रखने वाले सभी लोगों के लिए: मैं मानता हूं कि यह सबसे आसान या सुंदर वाक्यविन्यास नहीं है। यह वाक्यविन्यास पाइथन की सूची समझों का विस्तारित संस्करण है और यह जानकर कि मुझे वाक्यविन्यास को आसानी से याद रखने में मदद मिलती है। यह ऐसा कुछ है:

पायथन कोड:

my_list = [x**2 for x in [1, 2, 3, 4, 5]]
> [1, 4, 9, 16, 25]

# Let people to be a list of person instances
my_list2 = [person.name for person in people]
> my_list2 = ['Alice', 'Bob']

यह वास्तव में ऊपर सूचीबद्ध पहले के रूप में एक ही वाक्यविन्यास है। हालांकि, <select> हमें आमतौर पर कोड में वास्तविक मान और <select> तत्व में दिखाए गए पाठ (लेबल) के बीच अंतर करने की आवश्यकता होती है।

जैसे, हमें कोड में person.id आवश्यकता है, लेकिन हम उपयोगकर्ता को id नहीं दिखाना चाहते हैं; हम इसका नाम दिखाना चाहते हैं। इसी तरह, हम कोड में person.name में रुचि नहीं रखते हैं। सामान लेबल करने के लिए कीवर्ड के as आता है। तो यह इस तरह बन जाता है:

person.id as person.name for person in people

या, person बजाय। हम person उदाहरण / संदर्भ की आवश्यकता हो सकती है। निचे देखो:

person as person.name for person in people

जावास्क्रिप्ट ऑब्जेक्ट्स के लिए, वही विधि भी लागू होती है। बस याद रखें कि ऑब्जेक्ट में आइटम (key, value) जोड़े के साथ deconstructed है।

ऐसा लगता है कि बहुत से लोगों को परेशान करना (मुझे सहित)।

<select> टैग के विकल्पों को भरने के लिए AngularJS में ng-options निर्देश का उपयोग करते ng-options , मैं यह नहीं समझ सकता कि किसी विकल्प के लिए मान कैसे सेट करें। इसके लिए प्रलेखन वास्तव में अस्पष्ट है - कम से कम मेरे जैसे एक साधारण के लिए।

मैं पाठ को आसानी से इस तरह के विकल्प के लिए सेट कर सकता हूं:

ng-options="select p.text for p in resultOptions"

जब resultOptions विकल्प उदाहरण के लिए है:

[
    {
        "value": 1,
        "text": "1st"
    },
    {
        "value": 2,
        "text": "2nd"
    }
]

विकल्प विकल्प निर्धारित करने के लिए यह सबसे सरल बात होनी चाहिए (लेकिन शायद यह है), लेकिन अब तक मुझे यह नहीं मिला है।


ngOptions directive:

$scope.items = [{name: 'a', age: 20},{ name: 'b', age: 30},{ name: 'c', age: 40}];
  • Case-1) label for value in array:

    <div>
        <p>selected item is : {{selectedItem}}</p>
        <p> age of selected item is : {{selectedItem.age}} </p>
        <select ng-model="selectedItem" ng-options="item.name for item in items">
        </select>
    </div>
    

Output Explanation (Assume 1st item selected):

selectedItem = {name: 'a', age: 20} // [by default, selected item is equal to the value item ]

selectedItem.age = 20

  • Case-2) select as label for value in array:

    <div>
        <p>selected item is : {{selectedItem}}</p>
        <select ng-model="selectedItem" ng-options="item.age as item.name for item in items">
        </select>
    </div>
    

Output Explanation (Assume 1st item selected): selectedItem = 20 // [select part is item.age ]


इस तरह मैंने इसे हल किया। मैंने मूल्य के आधार पर चयन किया और चयनित आइटम प्रॉपर्टी को मेरे जावास्क्रिप्ट कोड में मॉडल में सेट किया।

Countries =
[
    {
        CountryId = 1, Code = 'USA', CountryName = 'United States of America'
    },
    {
       CountryId = 2, Code = 'CAN', CountryName = 'Canada'
    }
]
<select ng-model="vm.Enterprise.AdminCountry" ng-options="country.CountryName for country in vm.Countries track by country.CountryId">

vm मेरा नियंत्रक है और सेवा से पुनर्प्राप्त नियंत्रक में देश {CountryId =1, Code = 'USA', CountryName='United States of America'}

जब मैंने चुनिंदा ड्रॉपडाउन से दूसरे देश का चयन किया और अपना पृष्ठ "सेव" के साथ पोस्ट किया, तो मुझे सही देश बंधे।


इस प्रश्न का सही उत्तर उपयोगकर्ता frm.adiputra द्वारा प्रदान किया गया है, क्योंकि वर्तमान में यह विकल्प तत्वों के मान गुण को स्पष्ट रूप से नियंत्रित करने का एकमात्र तरीका प्रतीत होता है।

हालांकि, मैं बस जोर देना चाहता था कि "चयन" इस संदर्भ में कोई कीवर्ड नहीं है, लेकिन यह अभिव्यक्ति के लिए केवल प्लेसहोल्डर है। कृपया "चयन" अभिव्यक्ति की परिभाषा के साथ-साथ अन्य अभिव्यक्तियों की परिभाषा के लिए निम्नलिखित सूची देखें, जिनका उपयोग एनजी-विकल्प निर्देश में किया जा सकता है।

चयन में इसका उपयोग इस प्रश्न में दर्शाया गया है:

ng-options='select p.text for p  in resultOptions'

अनिवार्य रूप से गलत है।

अभिव्यक्तियों की सूची के आधार पर, ऐसा लगता है कि ऑब्जेक्ट्स की सरणी में विकल्प दिए जाने पर ट्रैकएक्सप्रो का उपयोग मूल्य निर्दिष्ट करने के लिए किया जा सकता है, लेकिन इसका उपयोग केवल समूह के साथ किया गया है।

एनजी-विकल्प के लिए AngularJS 'दस्तावेज़ से:

  • सरणी / ऑब्जेक्ट : एक अभिव्यक्ति जो एक सरणी / ऑब्जेक्ट को फिर से शुरू करने के लिए मूल्यांकन करती है।
  • मान : स्थानीय चर जो सरणी में प्रत्येक आइटम या पुनरावृत्ति के दौरान ऑब्जेक्ट के प्रत्येक प्रॉपर्टी वैल्यू को संदर्भित करेगा।
  • कुंजी : स्थानीय चर जो पुनरावृत्ति के दौरान ऑब्जेक्ट में किसी संपत्ति का नाम देखेंगे।
  • लेबल : इस अभिव्यक्ति का परिणाम तत्व के लिए लेबल होगा। अभिव्यक्ति सबसे अधिक संभावना मान चर (उदाहरण के लिए value.propertyName) का संदर्भ लेंगी।
  • चुनें : इस अभिव्यक्ति का परिणाम मूल तत्व के मॉडल से बंधेगा। यदि निर्दिष्ट नहीं है, तो अभिव्यक्ति का चयन मूल्य के लिए डिफ़ॉल्ट होगा।
  • समूह : इस अभिव्यक्ति का परिणाम DOM तत्व का उपयोग करके समूह विकल्पों में उपयोग किया जाएगा।
  • trackexpr : ऑब्जेक्ट्स की सरणी के साथ काम करते समय प्रयुक्त होता है। इस अभिव्यक्ति का परिणाम सरणी में वस्तुओं की पहचान करने के लिए उपयोग किया जाएगा। Trackexpr सबसे अधिक संभावना मान चर (उदाहरण के लिए value.propertyName) का संदर्भ लेंगे।

एनजी विकल्पों में कोई आइटम चुनना थोड़ा सा मुश्किल हो सकता है कि आप डेटा स्रोत कैसे सेट करते हैं।

थोड़ी देर के लिए उनके साथ संघर्ष करने के बाद मैंने उपयोग किए जाने वाले सबसे आम डेटा स्रोतों के साथ नमूना बना दिया। आप इसे यहां देख सकते हैं:

http://plnkr.co/edit/fGq2PM?p=preview

अब एनजी-विकल्प काम करने के लिए, यहां कुछ बातें ध्यान देने योग्य हैं:

  1. आम तौर पर आपको एक स्रोत से विकल्प और दूसरे से चयनित मूल्य मिलता है। उदाहरण के लिए:
    • राज्य :: एनजी विकल्पों के लिए डेटा
    • user.state :: चयनित के रूप में सेट करने का विकल्प
  2. 1 के आधार पर, सबसे आसान / तार्किक बात यह है कि एक स्रोत के साथ चयन को भरना है और फिर चयनित मान गंदे कोड को सेट करना है। मिश्रित डेटासेट प्राप्त करना शायद ही बेहतर होगा।
  3. AngularJS key | label से अधिक पकड़ने के लिए चयन नियंत्रण की अनुमति देता है key | label कई ऑनलाइन उदाहरण वस्तुओं को 'कुंजी' के रूप में रखते हैं, और यदि आपको ऑब्जेक्ट से जानकारी की आवश्यकता होती है, तो अन्यथा उस विशिष्ट संपत्ति का उपयोग करें जो आपको कुंजी के रूप में चाहिए। (आईडी, कोड, आदि .. plckr नमूना के रूप में)
  4. ड्रॉपडाउन / चयन नियंत्रण के मूल्य को सेट करने का तरीका # 3 पर निर्भर करता है,

    • यदि ड्रॉपडाउन कुंजी एक ही संपत्ति है (जैसे plunkr में सभी उदाहरणों में), तो आप इसे बस सेट करें, उदाहरण के लिए: $scope.dropdownmodel = $scope.user.state;
    • यदि आप ऑब्जेक्ट को कुंजी के रूप में सेट करते हैं, तो आपको विकल्पों को लूप करना होगा, ऑब्जेक्ट को असाइन करने से आइटम को चयनित के रूप में सेट नहीं किया जाएगा क्योंकि उनके पास अलग हैशकी होगी, उदाहरण के लिए:

      for (var i = 0, len = $scope.options.length; i < len; i++) {
        if ($scope.options[i].id == savedValue) { // Your own property here:
          console.log('Found target! ');
          $scope.value = $scope.options[i];
          break;
        }
      }
      

आप अन्य ऑब्जेक्ट, $scope.myObject.myProperty में उसी संपत्ति के लिए सहेजे गए वैल्यू को प्रतिस्थापित कर सकते हैं।


किसी ऑब्जेक्ट के लिए:

<select ng-model="mySelect" ng-options="key as value for (key, value) in object"></select>

कोड स्निपेट चलाएं और विविधताएं देखें। त्वरित समझ के लिए यहां नोट है

  1. उदाहरण 1 (ऑब्जेक्ट चयन): - ng-option="os.name for os in osList track by os.id"track by os.id यहां महत्वपूर्ण है और वहां होना चाहिए और os.id as से पहले नहीं होना चाहिए

    • ng-model="my_os" को my_os={id: 2} जैसी आईडी के रूप में कुंजी वाले ऑब्जेक्ट पर सेट करना चाहिए।
  2. उदाहरण 2 (मूल्य चयन): - ng-option="os.id as os.name for os in osList"track by os.id यहां नहीं होना चाहिए और os.id as से पहले होना चाहिए

    • ng-model="my_os" को my_os= 2 जैसे मान पर सेट होना चाहिए

बाकी कोड स्निपेट समझाएगा।

angular.module('app', []).controller('ctrl', function($scope, $timeout){
  
  //************ EXAMPLE 1 *******************
  $scope.osList =[
    { id: 1, name :'iOS'},
    { id: 2, name :'Android'},
    { id: 3, name :'Windows'}
  ]
  $scope.my_os = {id: 2};
  
  
  //************ EXAMPLE 2 *******************
  $timeout(function(){
    $scope.siteList = [
          { id: 1, name: 'Google'},
          { id: 2, name: 'Yahoo'},
          { id: 3, name: 'Bing'}
        ];
   }, 1000);
    
    $scope.my_site = 2;
  
    $timeout(function(){
      $scope.my_site = 3;
    }, 2000);
})
fieldset{
  margin-bottom: 40px;
  }
strong{
  color:red;
  }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.10/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">

  <!--//************ EXAMPLE 1 *******************-->
  <fieldset>
    <legend>Example 1 (Set selection as <strong>object</strong>)</legend>
    
    <select ng-model="my_os" ng-options="os.name for os in osList track by os.id">
        <option value="">--Select--</option>
      </select>
    {{my_os}}
    
  </fieldset>
  
  
  <!--//************ EXAMPLE 2 *******************-->
  <fieldset>
    <legend>Example 2 (Set selection as <strong>value</strong>. Simulate ajax)</legend>
      <select ng-model="my_site" ng-options="site.id as site.name for site in siteList">
        <option value="">--Select--</option>
      </select>
      {{my_site}}
  </fieldset>
  
</div>


जैसा कि पहले कई ने कहा था, अगर मेरे पास कुछ ऐसा डेटा है:

countries : [
              {
                 "key": 1,
                 "name": "UAE"
             },
              {
                  "key": 2,
                  "name": "India"
              },
              {
                  "key": 3,
                  "name": "OMAN"
              }
         ]

मैं इसका इस्तेमाल इस तरह करूँगा:

<select
    ng-model="selectedCountry"
    ng-options="obj.name for obj  in countries">
</select>

आपके कंट्रोलर में आपको पहले खाली आइटम से छुटकारा पाने के लिए प्रारंभिक मान सेट करने की आवश्यकता है:

 $scope.selectedCountry = $scope.countries[0];

 // You need to watch changes to get selected value
 $scope.$watchCollection(function() {
   return $scope.selectedCountry
 }, function(newVal, oldVal) {
     if (newVal === oldVal) {
       console.log("nothing has changed " + $scope.selectedCountry)
     } 
     else {
       console.log('new value ' + $scope.selectedCountry)
     }
 }, true)

तुम यह केर सकते हो:

<select ng-model="model">
    <option value="">Select</option>
    <option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>

-- अद्यतन करें

कुछ अपडेट के बाद, उपयोगकर्ता frm.adiputra का समाधान बहुत बेहतर है। कोड:

obj = { '1': '1st', '2': '2nd' };
<select ng-options="k as v for (k,v) in obj"></select>

नई 'ट्रैक बाय' सुविधा का उपयोग करने के बजाय आप इसे सरणी के साथ कर सकते हैं यदि आप चाहते हैं कि टेक्स्ट टेक्स्ट के समान हों:

<select ng-options="v as v for (k,v) in Array/Obj"></select>

मानक वाक्यविन्यास के बीच का अंतर ध्यान दें, जो मानों को ऑब्जेक्ट / ऐरे की कुंजी, और इसलिए 0,1,2 इत्यादि को सरणी के लिए बनाएगा:

<select ng-options"k as v for (k,v) in Array/Obj"></select>

के रूप में वी बनाम बनाम बनाम बनाम

मैंने यह सिंटैक्स को देखकर सामान्य ज्ञान के आधार पर खोजा। (के, वी) वास्तविक बयान है जो सरणी / ऑब्जेक्ट को प्रमुख मूल्य जोड़ों में विभाजित करता है।

'के रूप में v' कथन में, के मान होगा, और v उपयोगकर्ता के लिए प्रदर्शित पाठ विकल्प होगा। मुझे लगता है कि 'ट्रैक बाय' गन्दा और ओवरकिल है।


मुझे यह मुद्दा भी था। मैं एनजी विकल्पों में अपना मूल्य निर्धारित करने में सक्षम नहीं था। जेनरेट किया गया हर विकल्प 0, 1, ..., n के साथ सेट किया गया था।

इसे सही बनाने के लिए, मैंने अपने एनजी विकल्पों में ऐसा कुछ किया:

HTML:

<select ng-options="room.name for room in Rooms track by room.price">
    <option value="">--Rooms--</option>
</select>

मैं अपने सभी मूल्यों को room.price साथ सेट करने के लिए "ट्रैक बाय" का उपयोग करता हूं।

(यह उदाहरण बेकार है: क्योंकि यदि एक से अधिक मूल्य बराबर थे, तो कोड असफल हो जाएगा। इसलिए अलग-अलग मान सुनिश्चित करें।)

JSON:

$scope.Rooms = [
            { name: 'SALA01', price: 100 },
            { name: 'SALA02', price: 200 },
            { name: 'SALA03', price: 300 }
        ];

मैंने इसे ब्लॉग पोस्ट से सीखा है कैसे Angular.JS ng-options का उपयोग करके एक चुनिंदा तत्व के आरंभिक चयनित मान को सेट करें और ट्रैक करें

वीडियो देखना। यह एक अच्छी कक्षा है :)


मूल्य गुणों का मूल्य कैसे प्राप्त होता है:

  • डेटासोर्स के रूप में सरणी का उपयोग करते समय, यह प्रत्येक पुनरावृत्ति में सरणी तत्व का सूचकांक होगा;
  • किसी ऑब्जेक्ट को डेटासोर्स के रूप में उपयोग करते समय, यह प्रत्येक पुनरावृत्ति में संपत्ति का नाम होगा।

तो आपके मामले में यह होना चाहिए:

obj = { '1': '1st', '2': '2nd' };

<select ng-options="k as v for (k,v) in obj"></select>

मैंने थोड़ी देर के लिए इस समस्या से जूझ रहा है। मैंने AngularJS प्रलेखन के माध्यम से पढ़ा, यह और अन्य पोस्ट और कुछ ब्लॉग जो वे ले जाते हैं। उन सभी ने मुझे बेहतर विवरण देने में मदद की, लेकिन अंत में यह एक भ्रमित विषय प्रतीत होता है। मुख्य रूप से ng-options के कई वाक्य रचनात्मक बारीकियों के कारण।

अंत में, मेरे लिए, यह कम से कम नीचे आ गया है।

निम्नानुसार कॉन्फ़िगर किए गए दायरे को देखते हुए:

        //Data used to populate the dropdown list
        $scope.list = [
           {"FirmnessID":1,"Description":"Soft","Value":1},         
           {"FirmnessID":2,"Description":"Medium-Soft","Value":2},
           {"FirmnessID":3,"Description":"Medium","Value":3}, 
           {"FirmnessID":4,"Description":"Firm","Value":4},     
           {"FirmnessID":5,"Description":"Very Firm","Value":5}];

        //A record or row of data that is to be save to our data store.
        //FirmnessID is a foreign key to the list specified above.
        $scope.rec = {
           "id": 1,
           "FirmnessID": 2
        };

वांछित परिणाम प्राप्त करने के लिए मुझे बस इतना ही चाहिए:

        <select ng-model="rec.FirmnessID"
                ng-options="g.FirmnessID as g.Description for g in list">
            <option></option>
        </select>   

नोटिस मैंने track by उपयोग नहीं track by । चयनित आइटम track by का उपयोग करना हमेशा उस वस्तु को वापस कर देगा जो फर्मनेस आईडी के बजाय फर्मनेस आईडी से मेल खाता है। यह अब मेरे मानदंडों को पूरा करता है, जो कि यह वस्तु के बजाए एक संख्यात्मक मूल्य वापस करना चाहिए, और प्रदर्शन में सुधार के लिए ng-options का उपयोग करना चाहिए जो इसे उत्पन्न प्रत्येक विकल्प के लिए एक नया दायरा नहीं बनाकर प्रदान करता है।

इसके अलावा, मुझे रिक्त पहली पंक्ति की आवश्यकता थी, इसलिए मैंने बस <select> तत्व में <option> जोड़ा।

यहां एक Plunkr जो मेरा काम दिखाता है।


यदि आप अपने option तत्वों के मान को बदलना चाहते हैं क्योंकि फ़ॉर्म को अंततः सर्वर पर सबमिट किया जाएगा, ऐसा करने के बजाय,

<select name="text" ng-model="text" ng-options="select p.text for p in resultOptions"></select>

तुम यह केर सकते हो:

<select ng-model="text" ng-options="select p.text for p in resultOptions"></select>
<input type="hidden" name="text" value="{{ text }}" />

अपेक्षित मूल्य को सही नाम के तहत फॉर्म के माध्यम से भेजा जाएगा।


यहां बताया गया है कि मैं इस समस्या को विरासत एप्लिकेशन में कैसे हल करता हूं:

एचटीएमएल में:

ng-options="kitType.name for kitType in vm.kitTypes track by kitType.id" ng-model="vm.itemTypeId"

जावास्क्रिप्ट में:

vm.kitTypes = [
    {"id": "1", "name": "Virtual"},
    {"id": "2", "name": "Physical"},
    {"id": "3", "name": "Hybrid"}
];

...

vm.itemTypeId = vm.kitTypes.filter(function(value, index, array){
    return value.id === (vm.itemTypeId || 1);
})[0];

My HTML displays the option value properly.


सामान्य फॉर्म का उपयोग कर सर्वर पर my_hero नामक कस्टम मान भेजने के लिए सबमिट करें:

JSON:

"heroes": [
  {"id":"iron", "label":"Iron Man Rocks!"},
  {"id":"super", "label":"Superman Rocks!"}
]

HTML:

<select ng-model="hero" ng-options="obj.id as obj.label for obj in heroes"></select>
<input type="hidden" name="my_hero" value="{{hero}}" />

सर्वर को iron या super को my_hero के मान के रूप में प्राप्त होगा।

यह @neemzy द्वारा उत्तर के समान है, लेकिन value विशेषता के लिए अलग डेटा निर्दिष्ट करता है।


ऐसा प्रतीत होता है कि ng-options जटिल (संभावित रूप से निराशाजनक) का उपयोग करने के लिए जटिल हैं, लेकिन हकीकत में हमारे पास एक आर्किटेक्चर समस्या है।

कोणीय जेएस एक गतिशील एचटीएमएल + जावास्क्रिप्ट एप्लिकेशन के लिए एक एमवीसी ढांचे के रूप में कार्य करता है। जबकि इसके (वी) iew घटक एचटीएमएल "टेम्पलेटिंग" की पेशकश करते हैं, इसका प्राथमिक उद्देश्य मॉडल में बदलावों के लिए, नियंत्रक के माध्यम से उपयोगकर्ता क्रियाओं को जोड़ना है। इसलिए एंगुलरजेएस में काम करने के लिए अमूर्तता का उचित स्तर यह है कि एक चुनिंदा तत्व मॉडल में एक क्वेरी से मूल्य में एक मान निर्धारित करता है

  • उपयोगकर्ता को एक क्वेरी पंक्ति कैसे प्रस्तुत की जाती है (वी) iew की चिंता और ng-options कीवर्ड को यह निर्धारित करने के for प्रदान करता है कि विकल्प तत्व की सामग्री यानी p.text for p in resultOptions होना चाहिए।
  • सर्वर पर एक चयनित पंक्ति कैसे प्रस्तुत की जाती है (एम) ओडेल की चिंता है। इसलिए ng-options कीवर्ड को यह निर्दिष्ट करने के लिए प्रदान करता है कि मॉडल में किस मूल्य को के रूप में k as v for (k,v) in objects

सही समाधान यह समस्या है तो प्रकृति में वास्तुशिल्प है और इसमें आपके एचटीएमएल को दोबारा शामिल करना शामिल है ताकि (एम) ओडल आवश्यक होने पर सर्वर संचार करता है (उपयोगकर्ता को फॉर्म जमा करने के बजाय)।

यदि एक एमवीसी एचटीएमएल पेज हाथ में समस्या के लिए अनावश्यक ओवर-इंजीनियरिंग है: तो AngularJS (V) iew घटक के केवल HTML पीढ़ी के हिस्से का उपयोग करें। इस मामले में, उसी पैटर्न का पालन करें जिसका प्रयोग तत्वों को उत्पन्न करने के लिए किया जाता है जैसे &lt;li /&gt; के तहत &lt;ul /&gt; एक विकल्प तत्व पर ng-repeat रखें और रखें:

<select name=“value”>
    <option ng-repeat=“value in Model.Values” value=“{{value.value}}”>
        {{value.text}}
    </option>
</select>

kludge रूप में, कोई भी हमेशा चयनित तत्व के नाम विशेषता को एक छिपे हुए इनपुट तत्व पर ले जा सकता है:

<select ng-model=“selectedValue” ng-options=“value.text for value in Model.Values”>
</select>
<input type=“hidden” name=“value” value=“{{selectedValue}}” />

<select ng-model="color" ng-options="(c.name+' '+c.shade) for c in colors"></select><br>




angularjs