ngOptions गलत मानों के साथ विकल्पों में परिणाम

Question

मैं चयन बॉक्स प्रस्तुत करने की कोशिश कर रहा हूं और यह अपेक्षा के अनुसार काम नहीं करता है - विकल्प मान गलत हैं। मैं manual जाँच की है, यह करने के लिए सरणी के लिए वाक्यविन्यास (वस्तुओं की मेरे मामले सरणी में)

select as label for value in array 

तो यहाँ है अनुसार मैं क्या कर रहा है:

डेटा:

[{"id":"3","name":"asdasd","code":"asdads","group":"2","cost":"0"},{"id":"4","name":"adrf fg df ","code":"dasfasd","group":"2","cost":"0"}] 

टेम्पलेट :

<select ng-model="productToBuy" ng-options="item.id as item.id for item in products"></select> 

गाया परिणाम:

0,123,

<select ng-model="productToBuy" ng-options="item.id as item.id for item in products" class="ng-pristine ng-valid"> 
    <option value="0" selected="selected">3</option> 
    <option value="1">4</option> 
</select> 

जैसा कि हम देख सकते हैं, विकल्प मान आइटम की आईडी पर सेट नहीं होते हैं।

इसके अलावा इस उचित सिंटैक्स नहीं हो सकता है जब स्रोत सरणी है, लेकिन मैं जब इस तरह की कोशिश कर रहा एक ही परिणाम हो रही:

<select ng-model="productToBuy" ng-options="item.id as item.id for (key, item) in products"></select> 

मैं jsfiddle पर इस कोड डाल दिया। किसी भी मदद की सराहना की।

Answer 1

यह एनजी ऑप्शन निर्देश का व्यवहार है (आप जो आउटपुट देख रहे हैं, जहां मूल्य आइटम का सूचकांक है और आईडी आईडी नहीं है जिसे आप अपने कोड नमूने से पास करने का प्रयास कर रहे हैं)। ngOptions आपके द्वारा ngModel में निर्दिष्ट चर के लिए चयनित विकल्प को डेटा-बाइंड करेगा। फिर आप विकल्प तत्व के "मान" के बजाय अपने डेटा बाध्य चर के साथ काम करेंगे।

एचटीएमएल:

<select ng-model="selected" ng-options="item.name for item in items"></select> {{ selected }} 

जे एस:

$scope.items = [ 
    {"id": "3","name":"asdasd","code":"asdads","group":"2","cost":"0"}, 
    {"id": "4","name":"adrf fg df ","code":"dasfasd","group":"2","cost":"0"} 
]; 

उपरोक्त उदाहरण में, $ scope.selected वास्तविक चयनित आइटम का प्रतिनिधित्व करते हैं। फिर आप किसी भी चयनित आइटम के गुणों तक पहुंच सकते हैं: $ scope.selected.name, $ scope.selected.code ... आदि

यदि आपको उपरोक्त उदाहरण के साथ किसी आइटम को पूर्व निर्धारित करने की आवश्यकता है, तो आप निम्न कार्य कर सकते हैं :

$scope.items = [ 
    {"id": "3","name":"asdasd","code":"asdads","group":"2","cost":"0"}, 
    {"id": "4","name":"adrf fg df ","code":"dasfasd","group":"2","cost":"0"} 
]; 
$scope.selected = $scope.items[1]; // Pre-selected the 2nd item in your array 

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

संपादित करें: 'श्रेणी में मूल्य के लिए लेबल के रूप में चुनें' वाक्य रचना पर ध्यान दें:

मामले में अपनी सहायक, जो आपके "आइटम के रूप में item.id।उत्पादों में आइटम के लिए नाम "वास्तव में आपके चर को एनजीमोडेल निर्देश में सिंटैक्स के चयन भाग में निर्दिष्ट मान पर सेट कर रहा था। तो वह अभिव्यक्ति क्या कर रही है वह लेबल को item.name के रूप में सेट कर रही है, लेकिन $ स्कोप बाध्यकारी है। आइटम के पूरे उदाहरण के बजाय item.id के मान में चुना गया है। इसलिए यदि ऊपर दिए गए उदाहरणों में आपका पहला आइटम चुना गया था, तो $ scope.selected "3" के बराबर होगा। यह वास्तव में नहीं बदलता है विकल्प तत्व के ही मूल्य विशेषता

Answer 2

id के लिए JSON ऑब्जेक्ट में आपका डेटाप्रकार एक string है और $scope.selected का मूल्य integer है। यदि आप उनमें से एक को दूसरे में स्विच करते हैं तो यह ठीक काम करेगा!

विकल्पों में से मूल्य अभी भी 0 और 1 हो जाएगा लेकिन कोणीय की बाइंडिंग आप के लिए काम कर देता है और मूल्य आप अपनी अभिव्यक्ति में निर्दिष्ट किया है बांधता एनजी के लिए ( item.name रूप item.id) आपके माता-पिता तत्व (चयन तत्व) का मॉडल।

Answer 3

आप select तत्व की ng-model की जरूरत नहीं है और आप select तत्व के चयनित मूल्य का उपयोग करने के लिए, तो इस तरह से इसे लागू करना चाहते हैं:।

<select> 
    <option ng-repeat="item in items" value="{{item.value}}"> 
    {{item.text}} 
    </option> 
</select>