AngularJS के साथ Select Option से Blank ऑप्शन को हटा दें

Question

मैं AngularJS में नया हूं। मैंने बहुत खोज की, लेकिन इससे मेरी समस्या हल नहीं हुई।

मुझे चुनिंदा बॉक्स में पहली बार एक खाली विकल्प मिल रहा है।

यहाँ मेरा HTML कोड है

<div ng-app="MyApp1">
    <div ng-controller="MyController">
        <input type="text" ng-model="feed.name" placeholder="Name" />
        <select ng-model="feed.config">
            <option ng-repeat="template in configs">{{template.name}}</option>
        </select>
    </div>
</div>

जे एस

var MyApp=angular.module('MyApp1',[])
MyApp.controller('MyController', function($scope) {
    $scope.feed = {};

      //Configuration
      $scope.configs = [
                                 {'name': 'Config 1',
                                  'value': 'config1'},
                                 {'name': 'Config 2',
                                  'value': 'config2'},
                                 {'name': 'Config 3',
                                  'value': 'config3'}
                               ];
      //Setting first option as selected in configuration select
      $scope.feed.config = $scope.configs[0].value;
});

लेकिन यह काम नहीं लगता है। मैं इसे कैसे हल कर सकता हूं? यहाँ JSFiddle डेमो है

Answer 1

संदर्भ के लिए: एंगुलरज को चयन में खाली विकल्प क्यों शामिल है ?

खाली optionतब जनरेट किया जाता है जब द्वारा ng-modelनिर्दिष्ट विकल्पों के एक सेट में मौजूद कोई मान मौजूद नहीं होता है ng-options। यह आकस्मिक मॉडल चयन को रोकने के लिए होता है: एंगुलरजेएस यह देख सकता है कि प्रारंभिक मॉडल या तो अपरिभाषित है या विकल्पों के सेट में नहीं है और अपने दम पर मॉडल मूल्य तय नहीं करना चाहते हैं।

संक्षेप में: खाली विकल्प का मतलब है कि कोई भी वैध मॉडल नहीं चुना गया है (वैध से मेरा मतलब है: विकल्पों के सेट से)। इस खाली विकल्प से छुटकारा पाने के लिए आपको एक वैध मॉडल मूल्य का चयन करने की आवश्यकता है।

अपना कोड इस तरह बदलें

var MyApp=angular.module('MyApp1',[])
MyApp.controller('MyController', function($scope) {
  $scope.feed = {};

  //Configuration
  $scope.feed.configs = [
    {'name': 'Config 1',
     'value': 'config1'},
    {'name': 'Config 2',
     'value': 'config2'},
    {'name': 'Config 3',
     'value': 'config3'}
  ];
  //Setting first option as selected in configuration select
  $scope.feed.config = $scope.feed.configs[0].value;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="MyApp1">
  <div ng-controller="MyController">
    <input type="text" ng-model="feed.name" placeholder="Name" />
    <!-- <select ng-model="feed.config">
<option ng-repeat="template in configs">{{template.name}}</option>
</select> -->
    <select ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs">
    </select>
  </div>
</div>

काम JSFiddle डेमो

अद्यतन (31 दिसंबर, 2015)

यदि आप एक डिफ़ॉल्ट मान सेट नहीं करना चाहते हैं और रिक्त विकल्प को निकालना चाहते हैं,

<select ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs">
      <option value="" selected="selected">Choose</option>
</select>

और JS में मूल्य को इनिशियलाइज़ करने की कोई आवश्यकता नहीं है।

$scope.feed.config = $scope.feed.configs[0].value;

Comments

एक स्पष्टीकरण वास्तव में मदद करेगा

— जेरेमी

क्यों बढ़ रहा है configsसे $scopeकरने के लिए $scope.feedआवश्यक?

— पिओटर डोब्रोगोस्ट

तो ... इसका क्या मतलब है जब मेरे पास एक वैध मूल्य है और यह अभी भी मुझे उस विकल्प का उपयोग करने के बजाय एक रिक्त रेखा देता है? मॉडल - ०, विकल्प ०, ५०, १०० - चयन रिक्त लाइन पर शुरू होता है

— ११:३४

Answer 2

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

HTML कोड

<div ng-app="MyApp1">
    <div ng-controller="MyController">
        <input type="text" ng-model="feed.name" placeholder="Name" />
        <select ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs" placeholder="Config">
            <option value="" selected hidden />
        </select>
    </div>
</div>

अब आपने इस खाली विकल्प को परिभाषित कर दिया है, इसलिए चुनिंदा बॉक्स खुश है, लेकिन आप इसे छिपाए रखते हैं।

Comments

+1 एकमात्र उत्तर के लिए जो सूची में पहले विकल्प के लिए मॉडल को इनिशियलाइज़ नहीं करता है। मेरे अजीब कार्यान्वयन को रिक्त सूची शुरू करने के लिए चयन की आवश्यकता थी लेकिन चयन सूची पर क्लिक करने पर रिक्त विकल्प को शामिल नहीं किया गया। यह एकमात्र समाधान है जिसने मेरे लिए काम किया। धन्यवाद!

— बिली मैककी

Answer 3

यहाँ एक अद्यतन फ़िडेल है: http://jsfiddle.net/UKySp/

आपको अपना प्रारंभिक मॉडल मान वास्तविक वस्तु पर सेट करने की आवश्यकता है:

$scope.feed.config = $scope.configs[0];

और इस तरह दिखने के लिए अपना चयन अपडेट करें:

<select ng-model="feed.config" ng-options="item.name for item in configs">

Answer 4

संकल्प की एक अन्य विधि का उपयोग करके है: $firstमेंng-repeat

उपयोग:

<select ng-model="feed.config">
    <option ng-repeat="template in configs" ng-selected="$first">{{template.name}}</option>
</select>

संदर्भ :

ngSelected : https://docs.angularjs.org/api/ng/directive/ngSelected

$ प्रथम : https://docs.angularjs.org/api/ng/directive/ngRepeat

चियर्स

Answer 5

इसके कई तरीके हैं -

<select ng-init="feed.config = options[0]" ng-model="feed.config"
        ng-options="template.value as template.name for template in feed.configs">
</select>

या

$scope.feed.config = $scope.configs[0].name;

Answer 6

यह एक तरह का वर्कअराउंड है लेकिन आकर्षण की तरह काम करता है। बस <option value="" style="display: none"></option>एक भराव के रूप में जोड़ें । जैसे की:

<select size="4" ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs">
       <option value="" style="display: none"></option>
</select>

Comments

यह IE के अनुमान में डिफ़ॉल्ट विकल्प को नहीं छिपाता है

— राठमा

आईई में विशेष रूप से परीक्षण नहीं किया है कि

— हिमांशु अरोड़ा

Answer 7

यदि आप रिक्त स्थान का उपयोग एनजी-शो को हटाना चाहते हैं और आप कर रहे हैं! जेएस में मूल्य को इनिशियलाइज़ करने की आवश्यकता नहीं है।

<select ng-model="SelectedStatus" ng-options="x.caption for x in statusList">
    <option value="" ng-show="false"></option>
</select>`

Answer 8

अपना कोड इस तरह बदलें। आप विकल्प के अंदर मूल्य के बारे में भूल जाते हैं। इससे पहले कि आप एनजी-मॉडल असाइन करें। इसका एक मूल्य होना चाहिए। तभी यह अपरिभाषित मूल्य प्राप्त नहीं करता है।

<div ng-app="MyApp1">
<div ng-controller="MyController">
    <input type="text" ng-model="feed.name" placeholder="Name" />
     <select ng-model="feed">
        <option ng-repeat="template in configs" value="template.value">{{template.name}}    
 </option>
    </select>
    </div>
 </div>

जे एस

 var MyApp=angular.module('MyApp1',[])
 MyApp.controller('MyController',function($scope) {  
      $scope.feed = 'config1';      
      $scope.configs = [
         {'name': 'Config 1', 'value': 'config1'},
         {'name': 'Config 2', 'value': 'config2'},
         {'name': 'Config 3', 'value': 'config3'}
      ];
 });

Answer 9

का प्रयोग करें एनजी-मूल्य के बजाय मूल्य ।

$scope.allRecs = [{"text":"hello"},{"text":"bye"}];
$scope.X = 0;

और फिर html फ़ाइल में इस तरह होना चाहिए:

<select ng-model="X">  
     <option ng-repeat="oneRec in allRecs track by $index" ng-value="$index">{{oneRec.text}}</option>
</select>

Answer 10

मेरे लिए इस प्रश्न का उत्तर उपयोग कर <option value="" selected hidden />रहा था क्योंकि यह @RedSparkle प्लस द्वारा ng-if="false"IE में काम करने के लिए जोड़ा गया था ।

तो मेरा पूरा विकल्प है (जो मैंने पहले लिखा था उससे मतभेद है, लेकिन एनजी-इफ के कारण यह कोई फर्क नहीं पड़ता):

<option value="" ng-if="false" disabled hidden></option>

Answer 11

अंत में यह मेरे लिए काम किया।

<select ng-init="mybasketModel = basket[0]" ng-model="mybasketModel">
        <option ng-repeat="item in basket" ng-selected="$first">{{item}}</option>
</select>

Answer 12

यह भी जांचें कि क्या आपके पास कोई नकली मूल्य है या नहीं। यदि आपके पास मिथ्या मान है तो एंगुलरज एक खाली विकल्प डालेंगे। मैं सिर्फ झूठे मूल्य के कारण 2 दिनों तक संघर्ष करता रहा। मुझे उम्मीद है कि यह किसी के लिए मददगार होगा।

मेरे पास विकल्प [0, 1] के रूप में थे और शुरू में मैंने मॉडल को 0 पर सेट किया था, क्योंकि यह खाली विकल्प डाला गया था। इसके लिए वर्कअराउंड था ["0", "1"]।