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

Question

मैंने यहां कोणीय चयन निर्देश के प्रलेखन को देखा है: http://docs.angularjs.org/api/ng.directive:nlect । मैं यह निर्धारित नहीं कर सकता कि डिफ़ॉल्ट मान कैसे सेट किया जाए। यह भ्रामक है:

सरणी में मान के लिए लेबल के रूप में चुनें

यहाँ वस्तु है:

{
    "type": "select", 
    "name": "Service",
    "value": "Service 3", 
    "values": [ "Service 1", "Service 2", "Service 3", "Service 4"] 
}

Html (कार्य करना):

<select><option ng-repeat="value in prop.values">{{value}}</option></select>

और फिर मैं prop.valueडिफ़ॉल्ट विकल्प (काम नहीं कर रहा) के रूप में सेट करने के लिए चयन तत्व के अंदर एनजी-विकल्प विशेषता जोड़ने की कोशिश कर रहा हूं ।

ng-options="(prop.value) for v in prop.values"

मैं क्या गलत कर रहा हूं?

Answer 1

तो यह मान लेना कि वस्तु आपके दायरे में है:

<div ng-controller="MyCtrl">
  <select ng-model="prop.value" ng-options="v for v in prop.values">
  </select>
</div>

 

function MyCtrl($scope) {
  $scope.prop = {
    "type": "select", 
    "name": "Service",
    "value": "Service 3", 
    "values": [ "Service 1", "Service 2", "Service 3", "Service 4"] 
  };
}

वर्किंग प्लंकर: http://plnkr.co/edit/wTRXZYEPrZJRizEltQ2g

Comments

ठीक है मैंने समझ लिया! ng-optionबदल रहा है <option ng-repeat="value in prop.values">{{value}}</option>धन्यवाद फिर से

— फ़्राँस्वा रोमेन

ऐसा करने का एक सरल तरीका हो गया है, मुझे कोणीय js में एक सरल चयन डिफ़ॉल्ट मान के लिए यह बहुत जटिल लगता है

— एडमंड रोज़ास

एनजी-विकल्प निर्देश कुछ जटिल है और इसके सिंटैक्स पर भ्रमित है। मुझे लगता है कि वस्तुओं को बांधने के लचीलेपन ने इसे थोड़ा जटिल बना दिया है। जिस तरह से मैं यह याद रखने की कोशिश करता हूं कि जब भी मैं किसी वस्तु का उपयोग कर रहा हूं, तो मैं स्पष्ट रूप से इंगित करता हूं कि चयन नियंत्रण के मूल्य / पाठ विशेषताओं के लिए क्या गुणों का उपयोग करना है। अधिक जानकारी के लिए इसे देखें: ozkary.com/2015/08/angularjs-ngoption-directive-simplified.html

— ozkary

अगर आप का निर्माण करना चाहते एक विकल्प लिखने के बिना ध्यान में रखते हुए चयन करें और एक का चयन किया है<select ng-model="limit" value="10" ng-options="v for v in [5,10,15,20,30,50]"></select>

— asherrard

@ जेम्स क्लेह .. कहीं आप यू को जानने के बाद पहला विकल्प हार्डकॉपी कर रहे हैं। लेकिन अगर हम विकल्पों को नहीं जानते हैं और हम डिफ़ॉल्ट रूप से पहला प्रदर्शन कैसे कर सकते हैं?

— एच। वर्मा

Answer 2

चयन के लिए कोणीय प्रलेखन * स्पष्ट रूप से इस सवाल का जवाब नहीं है, लेकिन यह नहीं है। यदि आप script.jsइसे देखते हैं, तो आप इसे देखेंगे:

function MyCntrl($scope) {
  $scope.colors = [
    {name:'black', shade:'dark'},
    {name:'white', shade:'light'},
    {name:'red', shade:'dark'},
    {name:'blue', shade:'dark'},
    {name:'yellow', shade:'light'}
  ];
  $scope.color = $scope.colors[2]; // Default the color to red
}

यह HTML है:

<select ng-model="color" ng-options="c.name for c in colors"></select>

यह एक के <select>साथ एक चयनित मूल्य को डिफ़ॉल्ट करने का एक और अधिक स्पष्ट तरीका लगता है ng-options। यदि आपके पास अलग-अलग लेबल / मान हैं, तो भी यह काम करेगा।

* यह कोणीय 1.2.7 से है

Comments

यह मेरे लिए काम करता है, मुझे संदेह है कि यह फिर से आएगा लेकिन मैं वर्तमान में AngularJS v1.2.27 का उपयोग कर रहा हूं यदि कोई भी इसे पाता है और संगतता के बारे में सोच रहा है।

— रॉबर्ट कैडमायर

Answer 3

यह उत्तर तब अधिक उपयोगी होता है जब आप किसी DB से डेटा ला रहे होते हैं, संशोधन करते हैं और फिर परिवर्तनों को जारी रखते हैं।

 <select  ng-options="opt.id as opt.name for opt in users" ng-model="selectedUser"></select>

यहाँ उदाहरण देखें:

http://plnkr.co/edit/HrT5vUMJOtP9esGngbIV

Comments

अंत में यहाँ एक काम का जवाब है, उत्कीर्ण! इसके अलावा इस समाधान के साथ आपके पास अपरिभाषित विकल्प वर्कनिग ठीक से हो सकता है। <विकल्प मूल्य = ""> कृपया चुनें </ विकल्प>

— डीडीडी

तो खुशी है कि यह पोस्ट मौजूद है, मैं एक समाधान के लिए थोड़ी देर खोज रहा हूं और इसने मेरे मुद्दे को हल कर दिया है।

— आस्तीन ४२३

Answer 4

<select name='partyid' id="partyid" class='span3'>
<option value=''>Select Party</option>
<option ng-repeat="item in partyName" value="{{item._id}}" ng-selected="obj.partyname == item.partyname">{{item.partyname}}
</option>
</select>

Comments

यहाँ बुरा अभ्यास ... दूसरे पीले नोट पर एक नज़र डालें: docs.angularjs.org/api/ng/directive/select ।

— Mieur Toph '

यह काम करने वाला नहीं है, पूर्व। जब आप रिकॉर्ड को संपादित करने की कोशिश करते हैं, तो रिकॉर्ड क्षेत्र के साथ कैसे बंधेगा?

— पवनमाओ

Answer 5

यदि आपकी वस्तुओं का सरणी जटिल है जैसे:

$scope.friends = [{ name: John , uuid: 1234}, {name: Joe, uuid, 5678}];

और आपका वर्तमान मॉडल कुछ इस तरह सेट था:

$scope.user.friend = {name:John, uuid: 1234};

यह track byuuid (या किसी भी विशिष्ट क्षेत्र) पर फ़ंक्शन का उपयोग करने में मदद करता है, जब तक एनजी-मॉडल = "user.friend" में भी uuid होता है:

<select ng-model="user.friend" 
ng-options="friend as friend.name for friend in friends track by friend.uuid"> 
</select>

Comments

इस जवाब ने मेरा दिन बना दिया! इस दस्तावेज़ पर नज़र डालें: docs.angularjs.org/api/ng/directive/ngOptions

— Arashsoft

यह सबसे अच्छा जवाब है!

— गेरफ्रीड

Answer 6

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

आम तौर पर आप अपने डेटाबेस में केवल वांछित विकल्प को सहेजते हैं, इसलिए ... आइए इसे दिखाते हैं

service.js

myApp.factory('Models', function($http) {
var models = {};
models.allModels = function(options) {
    return $http.post(url_service, {options: options});
};

return models;
});

controller.js

myApp.controller('exampleController', function($scope, Models) {
$scope.mainObj={id_main: 1, id_model: 101};
$scope.selected_model = $scope.mainObj.id_model;
Models.allModels({}).success(function(data) {
    $scope.models = data; 
});
});

अंत में आंशिक html model.html

Model: <select ng-model="selected_model" 
ng-options="model.id_model as model.name for model in models" ></select>

मूल रूप से मैं उस टुकड़े " model.id_model को मॉडल के रूप में इंगित करना चाहता था ।" " model.id_model " मॉडल में मूल्य के लिए मॉडल की आईडी का उपयोग करता है ताकि आप " mainObj.id_model " के साथ मेल कर सकें। " selected_model ", यह सिर्फ एक सादे मूल्य, यह भी कि " model.name के रूप में " पुनरावर्तक के लिए लेबल है, अंत में " मॉडल में मॉडल " बस नियमित चक्र है कि हम के बारे में सभी जानते हैं।

आशा है कि यह किसी की मदद करता है, और यदि ऐसा होता है, तो कृपया वोट करें: डी

Comments

आप mainObj.id_modelसीधे ng-model="mainObj.id_model"'प्लेसहोल्डर / प्लेन वैल्यू' वैरिएबल का उपयोग करने के बजाय सीधे ( ) को बाइंड कर सकते हैंselected_model

— drzaus

हां, वास्तव में, मैं सिर्फ यह दिखाना चाहता था कि यह $ स्कोप के भीतर सीधे मूल्य के साथ किया जा सकता है, लेकिन यह इंगित करने के लिए धन्यवाद।

— विस्टन कोरोनेल

क्या किसी वस्तु से बंधना संभव है और सिर्फ एक इंट नहीं? मैं अपनी चुनी हुई वस्तु को सेट करने के लिए अपनी nGoptions प्राप्त नहीं कर सकता क्योंकि यह नहीं जानता कि मेरी {id: 24} को मेरे [{id: 23}, {id: 24}, {id: 25}] से कैसे जोड़ा जाए।

— विक्टरियो बेर्रा

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

— विस्टन कोरोनेल

Answer 7

<select id="itemDescFormId" name="itemDescFormId" size="1" ng-model="prop" ng-change="update()">
    <option value="">English(EN)</option>
    <option value="23">Corsican(CO)</option>
    <option value="43">French(FR)</option>
    <option value="16">German(GR)</option>

बस खाली मूल्य के साथ विकल्प जोड़ें। यह काम करेगा।

DEMO Plnkr

Comments

यह वास्तव में काम करता है अगर आप कुछ जोड़ते हैं जैसे<option value="" disabled>Please Select</option>

— fWd82

Answer 8

ऐसा करने का एक आसान तरीका डेटा-एनजी-इनिट का उपयोग करना है :

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

यहां मुख्य अंतर यह है कि आपको शामिल करने की आवश्यकता होगी data-ng-model

Comments

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

— user12121234

जिस तरह से मैंने एनजी-ऑप्शंस के साथ पोस्ट किया, वह बहुत आसान और अधिक ठोस है। दोनों तरीके काम करते हैं।

— व्यिट्रो

Answer 9

एनजी मॉडल विशेषता चयनित विकल्प सेट करता है और भी पाइप के लिए आप की तरह एक फिल्टर की अनुमति देता है orderBy: orderModel.value

index.html

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

controllers.js

$scope.orderOptions = [
    {"name":"Newest","value":"age"},
    {"name":"Alphabetical","value":"name"}
];

$scope.orderModel = $scope.orderOptions[0];

Comments

यह और मैं देख रहा हूँ angular.js:117 TypeError: a.forEach is not a function। कोई विचार?

— कारमेनिज़्म

Answer 10

यदि कोई व्यक्ति क्रोम, IE 10/11, फ़ायरफ़ॉक्स में पृष्ठ पर कभी-कभी डिफ़ॉल्ट रूप से पॉप्युलेट नहीं हो रहा है, तो इस विशेषता को अपने इनपुट / HTML में पॉपुलेटेड वैरिएबल के लिए फील्ड चेकिंग में जोड़ने का प्रयास करें, जैसे:

<input data-ng-model="vm.x" data-ng-if="vm.x !== '' && vm.x !== undefined && vm.x !== null" />

Answer 11

वास्तव में सरल अगर आप कुछ संख्यात्मक आईडी के साथ अपने विकल्पों को अनुक्रमित करने की परवाह नहीं करते हैं।

1. अपने $ स्कोप संस्करण - लोगों की सरणी घोषित करें

   $scope.people= ["", "YOU", "ME"];

2. उपरोक्त दायरे के DOM में, ऑब्जेक्ट बनाएं

   <select ng-model="hired" ng-options = "who for who in people"></select>

3. अपने नियंत्रक में, आप अपना एनजी-मॉडल "किराए पर" लेते हैं।

   $scope.hired = "ME";

सौभाग्य!!! यह वास्तव में आसान है!

Answer 12

बस जोड़ने के लिए, मैंने ऐसा कुछ किया।

 <select class="form-control" data-ng-model="itemSelect" ng-change="selectedTemplate(itemSelect)" autofocus>
        <option value="undefined" [selected]="itemSelect.Name == undefined" disabled="disabled">Select template...</option>
        <option ng-repeat="itemSelect in templateLists" value="{{itemSelect.ID}}">{{itemSelect.Name}}</option></select>