javascript - Angular.js में एक डिफ़ॉल्ट विकल्प कैसे चुनें बॉक्स का चयन करें




angularjs html-select (16)

ngOptions साथ select का उपयोग करना और डिफ़ॉल्ट मान सेट करना:

अधिक ngOptions उपयोग उदाहरणों के लिए docs.angularjs.org/api/ng/directive/ngOptions दस्तावेज़ देखें।

angular.module('defaultValueSelect', [])
 .controller('ExampleController', ['$scope', function($scope) {
   $scope.data = {
    availableOptions: [
      {id: '1', name: 'Option A'},
      {id: '2', name: 'Option B'},
      {id: '3', name: 'Option C'}
    ],
    selectedOption: {id: '2', name: 'Option B'} //This sets the default value of the select in the ui
    };
}]);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<body ng-app="defaultValueSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <label for="mySelect">Make a choice:</label>
    <select name="mySelect" id="mySelect"
      ng-options="option.name for option in data.availableOptions track by option.id"
      ng-model="data.selectedOption"></select>
  </form>
  <hr>
  <tt>option = {{data.selectedOption}}</tt><br/>
</div>

plnkr.co

कोणीय डेटा बाध्यकारी के साथ HTML SELECT तत्व के बारे में आधिकारिक दस्तावेज़ीकरण

बाध्यकारी ngModel पार्सिंग / स्वरूपण के माध्यम से एक गैर-स्ट्रिंग मान का select करें:

(function(angular) {
  'use strict';
angular.module('nonStringSelect', [])
  .run(function($rootScope) {
    $rootScope.model = { id: 2 };
  })
  .directive('convertToNumber', function() {
    return {
      require: 'ngModel',
      link: function(scope, element, attrs, ngModel) {
        ngModel.$parsers.push(function(val) {
          return parseInt(val, 10);
        });
        ngModel.$formatters.push(function(val) {
          return '' + val;
        });
      }
    };
  });
})(window.angular);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
<body ng-app="nonStringSelect">
  <select ng-model="model.id" convert-to-number>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
{{ model }}
</body>

plnkr.co

अन्य उदाहरण:

angular.module('defaultValueSelect', [])
 .controller('ExampleController', ['$scope', function($scope) {
   $scope.availableOptions = [
     { name: 'Apple', value: 'apple' }, 
     { name: 'Banana', value: 'banana' }, 
     { name: 'Kiwi', value: 'kiwi' }
   ];
   $scope.data = {selectedOption : $scope.availableOptions[1].value};
}]);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<body ng-app="defaultValueSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <select ng-model="data.selectedOption" required ng-options="option.value as option.name for option in availableOptions"></select>
  </form>  
  </div>
</body>

jsfiddle

मैंने Google की खोज की है और इस पर कुछ भी नहीं मिला है।

मेरे पास यह कोड है।

<select ng-model="somethingHere" 
        ng-options="option.value as option.name for option in options"
></select>

इस तरह के कुछ डेटा के साथ

options = [{
   name: 'Something Cool',
   value: 'something-cool-value'
}, {
   name: 'Something Else',
   value: 'something-else-value'
}];

और आउटपुट इस तरह कुछ है।

<select ng-model="somethingHere"  
        ng-options="option.value as option.name for option in options" 
        class="ng-pristine ng-valid">

    <option value="?" selected="selected"></option>
    <option value="0">Something Cool</option>
    <option value="1">Something Else</option>
</select>

डेटा में पहला विकल्प डिफ़ॉल्ट मान के रूप में सेट करना संभव है ताकि आपको इसका परिणाम मिल सके।

<select ng-model="somethingHere" ....>
    <option value="0" selected="selected">Something Cool</option>
    <option value="1">Something Else</option>
</select>

अपने मॉडल से चुने गए विकल्प को पॉप्युलेट करने के लिए नीचे दिए गए कोड का प्रयोग करें।

<select id="roomForListing" ng-model="selectedRoom.roomName" >

<option ng-repeat="room in roomList" title="{{room.roomName}}" ng-selected="{{room.roomName == selectedRoom.roomName}}" value="{{room.roomName}}">{{room.roomName}}</option>

</select>

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

<select ng-model="somethingHere.values" ng-options="values for values in [5,4,3,2,1]">
   <option value="">Pick a Number</option>
</select>

इसका मेरा समाधान एचटीएमएल का उपयोग मेरे डिफ़ॉल्ट विकल्प को हार्डकोड करने के लिए किया गया था। इस तरह:

एचएएमएल में:

%select{'ng-model' => 'province', 'ng-options' => "province as province for province in summary.provinces", 'chosen' => "chosen-select", 'data-placeholder' => "BC & ON"}
  %option{:value => "", :selected => "selected"}
    BC &amp; ON

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

<select ng-model="province" ng-options="province as province for province in summary.provinces" chosen="chosen-select" data-placeholder="BC & ON">
  <option value="" selected="selected">BC &amp; ON</option>
</select>

मैं अपने एपीआई से सभी मूल्यों को वापस करने का मेरा डिफ़ॉल्ट विकल्प चाहता हूं, यही कारण है कि मेरे पास खाली मूल्य है। मेरे haml भी बहाना। मुझे पता है कि यह सीधे ओपी के सवाल का जवाब नहीं है, लेकिन लोग इसे Google पर ढूंढते हैं। मनाइए कि यह किसी और के लिए सहायक हो।


इसे इस्तेमाल करे:

एचटीएमएल

<select 
    ng-model="selectedOption" 
    ng-options="option.name for option in options">
</select>

जावास्क्रिप्ट

function Ctrl($scope) {
    $scope.options = [
        {
          name: 'Something Cool',
          value: 'something-cool-value'
        }, 
        {
          name: 'Something Else',
          value: 'something-else-value'
        }
    ];

    $scope.selectedOption = $scope.options[0];
}

here प्लंकर।

यदि आप वास्तव में उस मान को सेट करना चाहते हैं जो मॉडल से बाध्य होगा, तो ng-options विशेषता को बदलें

ng-options="option.value as option.name for option in options"

और जावास्क्रिप्ट को

...
$scope.selectedOption = $scope.options[0].value;

उपर्युक्त पर विचार करने वाला एक और प्लंकर।


निम्नानुसार ng-selected="true" उपयोग करें:

<select ng-model="myModel">
        <option value="a" ng-selected="true">A</option>
        <option value="b">B</option>
</select>

मुझे लगता है कि 'ट्रैक बाय' को शामिल करने के बाद, आप इसे प्राप्त करने के लिए एनजी-विकल्प में इसका उपयोग कर सकते हैं, जैसे कि आप चाहते थे

 <select ng-model="somethingHere" ng-options="option.name for option in options track by option.value" ></select>

ऐसा करने का यह तरीका बेहतर है क्योंकि जब आप ऑब्जेक्ट्स की सूची के साथ स्ट्रिंग्स की सूची को प्रतिस्थापित करना चाहते हैं तो आप इसे बदल देंगे

 <select ng-model="somethingHere" ng-options="object.name for option in options track by object.id" ></select>

जहां कुछ है, संपत्तियों और आईडी के साथ एक वस्तु है। कृपया ध्यान दें, 'as' का उपयोग ng-options को व्यक्त करने के इस तरीके से नहीं किया जाता है, क्योंकि यह केवल मान निर्धारित करेगा और जब आप ट्रैक का उपयोग कर रहे हों तो आप इसे बदलने में सक्षम नहीं होंगे


मुझे लगता है कि सबसे आसान तरीका है

 ng-selected="$first"

मेरे मामले में, मुझे केवल एक विकल्प चुनने के लिए उपयोगकर्ता को बताने के लिए प्रारंभिक मान डालने की आवश्यकता थी, इसलिए, मुझे नीचे दिए गए कोड को पसंद है:

<select ...
    <option value="" ng-selected="selected">Select one option</option>
</select>

जब मैंने मूल्य के साथ एक विकल्प का प्रयास किया! = खाली स्ट्रिंग (शून्य) विकल्प को कोणीय द्वारा प्रतिस्थापित किया गया था, लेकिन, जब उस विकल्प को विकल्प (शून्य मान के साथ) डालें, तो इस विकल्प के साथ चयन करें।

मेरी बुरी अंग्रेजी से खेद है और मुझे उम्मीद है कि मैं इसके साथ कुछ करने में मदद करता हूं।


मैं मॉडल को नियंत्रक में सेट कर दूंगा। फिर चयन उस मान के लिए डिफ़ॉल्ट होगा। पूर्व: एचटीएमएल:

<select ng-options="..." ng-model="selectedItem">

कोणीय नियंत्रक (संसाधन का उपयोग):

myResource.items(function(items){
  $scope.items=items;
  if(items.length>0){
     $scope.selectedItem= items[0];
//if you want the first. Could be from config whatever
  }
});

यदि आप यह सुनिश्चित करना चाहते हैं कि आपका $scope.somethingHere आपका दृश्य प्रारंभ होने पर मूल्य को अधिलेखित नहीं किया जाता है, तो आप $scope.somethingHere ( somethingHere = somethingHere || options[0].value ) आपके एनजी- somethingHere = somethingHere || options[0].value में मान :

<select ng-model="somethingHere" 
        ng-init="somethingHere = somethingHere || options[0].value"
        ng-options="option.value as option.name for option in options">
</select>

यदि आपके पास दिनांक भाग को केवल init के बजाय कुछ चीज है, तो आप इसे अपने नियंत्रक में घोषित करके ng-init() उपयोग कर सकते हैं और इसे अपने HTML के शीर्ष पर उपयोग कर सकते हैं। यह फ़ंक्शन आपके नियंत्रक के लिए एक कन्स्ट्रक्टर की तरह काम करेगा, और आप वहां अपने चर शुरू कर सकते हैं।

angular.module('myApp', [])
 .controller('myController', ['$scope', ($scope) => {
   $scope.allOptions = [
     { name: 'Apple', value: 'apple' }, 
     { name: 'Banana', value: 'banana' }
   ];
   $scope.myInit = () => {
      $scope.userSelected = 'apple'
      // Other initiations can goes here..
   }
}]);


<body ng-app="myApp">
  <div ng-controller="myController" ng-init="init()">
    <select ng-model="userSelected" ng-options="option.value as option.name for option in allOptions"></select>
   </div>
</body>

यह मेरे लिए काम किया।

<select ng-model="somethingHere" ng-init="somethingHere='Cool'">
    <option value="Cool">Something Cool</option>
    <option value="Else">Something Else</option>
</select>

स्वीकृत उत्तर ng-init उपयोग करते हैं, लेकिन docs.angularjs.org/api/ng/directive/ngInit संभवतः एनजी-इनिट से बचने के लिए कहता है।

NgInit का एकमात्र उचित उपयोग ngRepeat के विशेष गुणों को अलियासिंग के लिए है, जैसा कि नीचे डेमो में देखा गया है। इस मामले के अलावा, आपको दायरे पर मूल्यों को आरंभ करने के लिए ngInit के बजाय नियंत्रकों का उपयोग करना चाहिए।

आप अपने विकल्पों के लिए ng-options बजाय ng-repeat भी उपयोग कर सकते हैं। ng-repeat , आप ng-repeat विशेष गुणों के साथ ng-repeat ng-selected उपयोग कर सकते हैं। यानि $ इंडेक्स, $ अजीब, $ बिना किसी कोडिंग के इस काम को करने के लिए।

$first ng-repeat विशेष गुणों में से एक है।

  <select ng-model="foo">
    <option ng-selected="$first" ng-repeat="(id,value) in myOptions" value="{{id}}">
      {{value}}
    </option>
  </select>

---------------------- संपादित करें ----------------
यद्यपि यह काम करता है, मैं @ mik-t का उत्तर पसंद करूंगा जब आपको पता चलेगा कि कौन सा मूल्य चुनना है, https://.com/a/29564802/454252 , जो ng-init या ng-repeat का उपयोग किए बिना track-by और ng-options का उपयोग करता है ng-repeat

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


श्रीवाथसा हरीश वेंकटरामना द्वारा केवल एक ही जवाब का उल्लेख किया track by जिसके track by वास्तव में इसका समाधान है!

चुनिंदा ng-options में track by का उपयोग करने के तरीके के बारे में प्लंकर (नीचे लिंक) के साथ एक उदाहरण यहां दिया गया है:

<select ng-model="selectedCity"
        ng-options="city as city.name for city in cities track by city.id">
  <option value="">-- Select City --</option>
</select>

यदि selectedCity सीटी को कोणीय दायरे पर परिभाषित किया गया है, और इसमें id संपत्ति है जो cities सूची में किसी भी city की किसी भी id के समान मूल्य के साथ है, तो यह लोड पर ऑटो का चयन किया जाएगा।

इसके लिए प्लंकर यहां है: http://plnkr.co/edit/1EVs7R20pCffewrG0EmI?p=preview

अधिक जानकारी के लिए स्रोत दस्तावेज़ देखें: https://code.angularjs.org/1.3.15/docs/api/ng/directive/select


बेस्ट एंड सरल तरीका (अपडेटेड)

यहां बताया गया है https://.com/a/37962911/5902146








html-select