एनजी-विकल्प पहले सेट करने का तरीका हमेशा चयन खाली

Question

मैं एक परियोजना में AngularJS उपयोग कर रहा हूँ और जिसमें मैं पैदा करने के लिए एनजी-विकल्पों का उपयोग कर रहा हूँ।

शुरू में जब पृष्ठों को फिर से लोड और कोई विकल्प नहीं तत्व नीचे की तरह उत्पन्न एचटीएमएल चयन किया जाता है:

<select size="3" ng-model="item" ng-options="s.name for s in itemlist"> 
<option value="?" selected="selected"></option> 
<option value="0">Item 1</option> 
<option value="1">Item 2</option> 
<option value="2">Item 3</option> 
</select> 

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

अग्रिम धन्यवाद।

Answer 1

यह आप के लिए काम करेंगे:

<select size="3" ng-model="item" ng-options="s.name for s in itemlist"> 
    <option value="">Select Option</option> 
</select> 

Answer 2

ऐसा लगता है कि आपका सबसे अच्छा विकल्प खाली आइटम itemlist में पहला आइटम के रूप में शामिल करने के लिए किया जाएगा।

Answer 3

आप ng-options का उपयोग कर जा सकते हैं और ng-repeat का उपयोग कर सकते हैं और पहले विकल्प खाली कर सकते हैं। नीचे उदाहरण देखें।

<select size="3" ng-model="item"> 
    <option value="?" selected="selected"></option> 
    <option ng-repeat="s in itemlist" value="{{s.value}}">{{s.name}}</option> 
</select> 

Answer 4

वहाँ किसी के लिए है कि "अशक्त" विकल्पों में से एक (के लिए के रूप में मान्य मान का इलाज तो कल्पना करो कि "शून्य" का मान है टाइपऑप्शन में आइटमों में से एक उदाहरण नीचे उदाहरण में), मुझे यह सुनिश्चित करने का सबसे आसान तरीका मिल गया है कि स्वचालित रूप से जोड़ा गया विकल्प छिपा हुआ है ng-if का उपयोग करना।

<select ng-options="option.value as option.name for option in typeOptions"> 
    <option value="" ng-if="false"></option> 
</select> 

क्यों ng-if और ng-hide नहीं? क्योंकि आप सीएसएस चयनकर्ता चाहते हैं जो उपरोक्त के अंदर पहले विकल्प को "वास्तविक" विकल्प को लक्षित करने के लिए चुनते हैं, न कि छुपा हुआ। यह उपयोगी हो जाता है जब आप e2e परीक्षण के लिए प्रोटैक्टर का उपयोग कर रहे हैं और (किसी भी कारण से) आप चुनिंदा विकल्पों को लक्षित करने के लिए by.css() का उपयोग करते हैं।

केविन - सू Tầm

Answer 5

 <select ng-model="dataItem.platform_id" 
      ng-options="item.id as item.value for item in platformList" 
      ng-init="dataItem.platform_id=dataItem.platform_id||platformList[0].id"></select> 

Answer 6

इच्छा भ्रष्ट कबाड़ डेटा के साथ मॉडल ऊपर समाधान। सही तरीके से मॉडल पुनर्स्थापित करने के लिए जे एस निर्देश का उपयोग करें: ऑप्शन चुनें

Directive" 
.directive('dropDown', function($filter) { 
    return { 

     require: 'ngModel', 
     priority: 100, 
     link: function(scope, element, attr, ngModel) { 

      function parse(value) { 

       if (value) { 

        if(value === "") 
        { 
         return "crap" 
        } 
        else 
        { 
         return value; 
        } 

       } else { 
        return; 
       } 
      } 


      ngModel.$parsers.push(parse); 

     } 
    }; 
}); 

Answer 7

नियंत्रक

$scope.item = ''; 

$scope.itemlist = { 
    '' = '', 
    'Item 0' = 1, 
    'Item 1' = 2, 
    'Item 2' = 3 
}; 

एचटीएमएल

<select data-ng-model="item" data-ng-options="v as k for (k, v) in itemlist"></select>