কেন AngularJS নির্বাচন করে একটি ফাঁকা বিকল্প অন্তর্ভুক্ত করে?

Question

আমি গত কয়েক সপ্তাহ ধরে অ্যাঙ্গুলার জেএসের সাথে কাজ করছি এবং একটি জিনিস যা আমাকে সত্যিই বিরক্ত করছে তা হ'ল http://docs.angularjs.org/api/ng এ স্পেসিফিকেশনটিতে সংজ্ঞায়িত সমস্ত কনফিউশন বা কনফিগারেশন চেষ্টা করার পরেও .ডাইরেক্টিভ: নির্বাচন করুন , আমি এখনও নির্বাচনের উপাদানগুলির প্রথম শিশু হিসাবে একটি খালি বিকল্প পাই।

জেড এখানে:

select.span9(ng-model='form.type', required, ng-options='option.value as option.name for option in typeOptions');

এখানে নিয়ামক:

$scope.typeOptions = [
    { name: 'Feature', value: 'feature' },
    { name: 'Bug', value: 'bug' },
    { name: 'Enhancement', value: 'enhancement' }
];

শেষ পর্যন্ত, এইচটিএমএল যা উত্পন্ন হয় এখানে:

<select ng-model="form.type" required="required" ng-options="option.value as option.name for option in typeOptions" class="span9 ng-pristine ng-invalid ng-invalid-required">
    <option value="?" selected="selected"></option>
    <option value="0">Feature</option>
    <option value="1">Bug</option>
    <option value="2">Enhancement</option>
</select>

এ থেকে মুক্তি পেতে আমার কী করা দরকার?

পিএস: জিনিসগুলি এগুলি ছাড়াও কাজ করে তবে আপনি একাধিক নির্বাচন ছাড়াই সিলেক্ট 2 ব্যবহার করেন তবে এটি অদ্ভুত দেখাচ্ছে।

Answer 1

শূন্যটি optionউত্পন্ন হয় যখন কোনও রেফারেন্সযুক্ত মানটি ng-modelপাসের বিকল্পগুলির সেটগুলিতে উপস্থিত না থাকে ng-options। এটি দুর্ঘটনাক্রমে মডেল নির্বাচন প্রতিরোধ করার জন্য ঘটে: অ্যাঙ্গুলারজেএস দেখতে পারে যে প্রাথমিক মডেলটি অপর সংজ্ঞায়িত বা বিকল্পগুলির সেটে নয় এবং নিজেই মডেল মান সিদ্ধান্ত নিতে চায় না।

আপনি যদি খালি বিকল্প থেকে মুক্তি পেতে চান তবে আপনার নিয়ামকের একটি প্রাথমিক মান নির্বাচন করুন, এরকম কিছু:

$scope.form.type = $scope.typeOptions[0].value;

এখানে জেএসফিডেল: http://jsfiddle.net/MTfRD/3/

সংক্ষেপে: খালি বিকল্পটির অর্থ কোনও বৈধ মডেল বাছাই করা হয়নি (বৈধভাবে আমি বলতে চাইছি: বিকল্পগুলির সেট থেকে)। এই খালি বিকল্পটি থেকে মুক্তি পেতে আপনাকে একটি বৈধ মডেল মান নির্বাচন করতে হবে।

Comments

আমি উভয় দিয়েই চেষ্টা করেছি $ স্কোপ.ফরম.টাইপ = ''; এবং $ স্কোপ.ফরম.টাইপ = $ স্কোপ.টি টাইপ অধ্যায়গুলি [0], তবে আমি এখনও এটি - <বিকল্প মান = "? নির্বাচিত = "নির্বাচিত"> </option>

— সুধাংশু

কখনও কখনও এটি জেএসে এই ডেটা থাকা সত্যই বোধগম্য হয় না। যদি এটি সার্ভারই ​​সিদ্ধান্ত নিয়েছে যে সিদ্ধান্তটি নিয়েছিল, তবে জেএসকে কেন এটি নকল করতে হবে?

— heneryville

দুর্ভাগ্যক্রমে এটি কার্যকর হয় না যদি আপনি কোনও অ্যারে ব্যবহার করেন এবং nullআপনার মানগুলির মধ্যে একটি হয়।

— vpiTriumph

খালি <option>তাই <option value="?">Select an option</option>

— টট

@ তারেক 117 কেবল বিকল্প তালিকাটির নালিক্যমুক্ত <option value="">Select an option</option>করতে পারে। -চারারটার দরকার নেই?

— সেবাস্তিয়ান

Answer 2

আপনি যদি প্রাথমিক মান চান তবে @ pkozlowski.opensource এর উত্তর দেখুন, যা এফওয়াইআই এনজি-থিং ব্যবহার করে (নিয়ন্ত্রকের চেয়ে বরং) প্রয়োগ করা যেতে পারে:

<select ng-model="form.type" required="required" ng-init="form.type='bug'"
  ng-options="option.value as option.name for option in typeOptions" >
</select>

আপনি যদি প্রাথমিক মানটি না চান, "একটি খালি স্ট্রিংয়ের মান সহ একটি হার্ড-কোডিং উপাদান, উপাদানটিতে বাসা বাঁধতে পারে This এই উপাদানটি তখন নাল বা" নির্বাচিত নয় "বিকল্পটি উপস্থাপন করবে:

<select ng-model="form.type" required="required"
  ng-options="option.value as option.name for option in typeOptions" >
    <option style="display:none" value="">select a type</option>
</select>

Comments

@ হুগো, ফিডিং কাজ করছে: jsfiddle.net/4qKyx/1 নোট করুন যে "একটি প্রকার নির্বাচন করুন" দেখানো হয়েছে, তবে এর সাথে কোনও মান যুক্ত নেই। এবং একবার আপনি অন্য কিছু নির্বাচন করলে, আপনি এটি আর দেখতে পাবেন না। (ক্রোমের উপর পরীক্ষা।)

— রাজকক

@ মার্করাজাক - চমৎকার পরামর্শ! আমি আপনার উদাহরণটি ট্রান্সক্লুডিং ডিরেক্টর্ট ব্যবহার করে অন্য কোনও সমস্যায় হোঁচট খেয়েছি। আপনি কি দয়া করে দেখতে পারেন? plnkr.co/edit/efaZdEQlNfoDihk1R1zc?p= পূর্বরূপ

— জানু-তেরজে সেরেনসেন

এই সঙ্গে সমস্যা আপনি কি এখনো কীবোর্ড সঙ্গে নির্বাচন করতে পারেন, দেখতে stackoverflow.com/a/8442831/57344 সমাধান

— HaveAGuess

এটি আপাতত কাজ করতে পারে তবে কৌণিক ডকুমেন্টেশন বিশেষত এনজি- পুন

— এড নরিস

আইই 10 তে কাজ করে না, "টাইপ করুন টাইপ করুন" সর্বদা দৃশ্যমান এবং নির্বাচনযোগ্য।

— রবিন

Answer 3

কৌণিক <1.4

"নাল" কে যে কোনও একটি বিকল্পের বৈধ মান হিসাবে বিবেচনা করে (যার ফলে নীচে উদাহরণস্বরূপ "নাল" টাইপঅপশনগুলির মধ্যে একটি আইটেমের একটি মান হিসাবে কল্পনা করুন ), আমি স্বয়ংক্রিয়ভাবে যুক্ত হয়েছে তা নিশ্চিত করার সহজতম উপায়টি খুঁজে পেলাম বিকল্পটি লুকানো আছে এনজি-ইফ ব্যবহার করা।

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

এনজি-ইফ এবং এনজি-লুকান না কেন ? কারণ আপনি সিএসএস নির্বাচনকারীদের চান যা উপরের প্রথম বিকল্পটিকে লক্ষ্য করে "আসল" বিকল্পটি বেছে নেবে, এটি লুকানো নয়। আপনি যখন e2e পরীক্ষার জন্য প্রটেক্টর ব্যবহার করছেন এবং (যে কোনও কারণেই) আপনি নির্বাচিত বিকল্পগুলি লক্ষ্য করে আপনি by CSS () ব্যবহার করেন তখন এটি কার্যকর হয়।

কৌণিক> = 1.4

বাছাই এবং বিকল্পগুলির নির্দেশিকাগুলির রিফ্যাক্টরিংয়ের কারণে ব্যবহার ng-ifকরা এখন আর একটি কার্যকর বিকল্প নয় তাই আপনাকে ng-show="false"এটিকে আবার কাজ করার দিকে ঝুঁকতে হবে ।

Comments

গ্রহণযোগ্য উত্তর হওয়া উচিত, কারণ এটি নির্বাচনের জন্য সঠিক ভিজ্যুয়াল আচরণ। আপনি size="5"নির্বাচিত বৈশিষ্ট্যগুলিতে রেখেছেন এবং আপনি দেখতে পাচ্ছেন যে এখানে কিছুই নির্বাচিত নেই! ডিফল্ট- <select>এলিমেন্টের মতো ! কেন কৌণিক বিন্যাস ছাড়াই বাছাইয়ের জন্য এমন কাজ করছে তা আমি বুঝতে পারি না multiple...

— সেবাস্তিয়ান

হ্যাঁ আমি সম্মত, এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। এটি 'কৌণিক-উপায়'। এনজি-যদি আসলে ডোম থেকে অপশন উপাদান সরিয়ে দেয় (যখন মিথ্যা) তাই এই সমাধানটি 'হ্যাকি' কোডিং ছাড়াই সমস্ত ব্রাউজারগুলিতেও কাজ করে (এনজি-হাইড বা এনজি-শোয়ের বিপরীতে)।

— Sander_P

@ সান্দারপ_ সংজ্ঞা অনুসারে এই সমাধানটি আমার মতে কোডিং (হ্যাকি) কোডিং (কৌতুকটি ছড়িয়ে দেওয়ার জন্য ডোমে কিছু রেখে এটি এনে দেওয়ার জন্য), তবে আপনি ঠিক বলেছেন এটি এখনও "সেরা" সমাধান। "আরও উন্নততর" সমাধানটি হ'ল কোনও ফ্রিগিন সিলেক্টের জন্য যার কোনও মূল্য নেই allow কি হ্যাক? এটি এর প্রান্তের মতো নয় scenario

— দুদেওয়াদ

@ দেদেওয়াদ: জিনিসগুলি কৌনিক 1.4 এর সাথে আরও ভাল কাজ করতে পারে। অ্যাঙ্গুলারজেএস ব্লগটি ১.৪.০ এর জন্য: "এনজিওপশনগুলি বেশ কয়েকটি বিরক্তিকর বাগগুলি ঠিক করার অনুমতি দেওয়ার জন্য পুরোপুরি পুনরুদ্ধার করা হয়েছিল,"

— স্যান্ডার_প

হাহাহ "বিরক্তিকর বাগ"। ঠিক আছে. ডেলিভারির 3 দিন আগে যখন আপগ্রেড করার বিষয়টি আসে আমি তখনও কিছুটা স্কিডীয় তাই আমি আপাতত আপনার সমাধানটি রাখব যা মনে হয় সাঁতার কাটছে। ভবিষ্যতের জন্য খ্যাত, যদিও :) ধন্যবাদ!

— dudewad

Answer 4

কারও জন্য দরকারী:

আপনি যদি এনজি-বিকল্পগুলির পরিবর্তে সরল বিকল্পগুলি ব্যবহার করতে চান তবে আপনি নীচের মতো করতে পারেন:

<select ng-model="sortorder" ng-init="sortorder='publish_date'">
  <option value="publish_date">Ascending</option>
  <option value="-publish_date">Descending</option>
</select>

মডেলটি ইনলাইন সেট করুন। খালি বিকল্প থেকে মুক্তি পেতে এনজি-আরএন ব্যবহার করুন

Comments

আমি জেএসওএন অ্যারের পরিবর্তে ওবিজেইসিটিএস-এর সাথে এনজি-অপশন স্থাপনের সুস্পষ্ট উদাহরণ খুঁজে পাইনি এবং যখন আমি দুজনের মধ্যে "অনুবাদ" করার চেষ্টা করি তখনই এটি সঠিকভাবে প্রকাশ পায় না তবে এটি "নিঃশব্দে" ব্যর্থ হয় আমি কী ভুল করছি তা সম্পর্কে আমার কোনও ধারণা নেই। অবশেষে আমি কোনও বিকল্প ট্যাগে সরল এনজি-রিপিটের পক্ষে বেছে নিয়েছি। আমি জানি এটি সর্বোত্তম অনুশীলন নয় তবে কমপক্ষে এটি কাজ করে। যদি কেউ আমাকে সরলভাবে নির্দেশ করতে পারেন, বিশদে সহজেই অদলবদল হতে পারেন, কৌণিক-এন00 বি-বান্ধব ওয়ার্কিং উদাহরণ উদাহরণস্বরূপ এনজি-অপশন ব্যবহার করে (জেএসএন নয়), আমি আনন্দিত হব। এটি এনজি-থার পাশাপাশি ব্যবহার করে তবে ডাবল এলিটেড।

— কোড-সুশি

আমি সরল বিকল্পগুলি ব্যবহার করছি, তবে নিয়ামকটিতে আমি নির্বাচিত ড্রপডাউনয়ের মান পেতে চাই না। উদাহরণস্বরূপ: আমি সতর্কতা চেষ্টা করেছি ($ স্কোপ.সোর্টর্ডার.ভ্যালু); এবং সতর্কতা ($ স্কোপ.সোর্টর্ডার); উভয়ই অপরিশোধিত দেয়। এখানে নির্বাচিত মানটি কীভাবে পাবেন?

— ম্যাভারিক রিজ

এই জন্য আপনাকে অনেক ধন্যবাদ. আমি নিয়ামকটিতে একটি সম্পূর্ণ অকেজো বস্তু লিখতে যাচ্ছিলাম যে আমার প্রয়োজন হয়নি আমার কেবল একটি সাধারণ নির্বাচন দরকার ... আবার একবার আপনাকে ধন্যবাদ।

— মুহাম্মদ বিন ইউসরাত

Answer 5

আমার সাথেও একই রকম ঘটনা ঘটছিল এবং কৌণিক 1.5 তে আপগ্রেড হওয়ার কারণে ঘটেছিল। ng-initমনে হচ্ছে অ্যাঙ্গুলারের নতুন সংস্করণগুলিতে টাইপ করার জন্য পার্স করা হয়েছে । পুরানো কৌণিকটি ng-init="myModelName=600""600" মান সহ একটি বিকল্পের মানচিত্র করবে <option value="600">First</option>তবে কৌণিক 1.5 তে এটি এটি পাবে না কারণ এটি 600 মানের সাথে একটি বিকল্পের প্রত্যাশা করে বলে মনে হচ্ছে <option value=600>First</option>। কৌণিকর পরে একটি এলোমেলো প্রথম আইটেম wouldোকানো হবে:

<option value="? number:600 ?"></option>

কৌণিক <1.2.x

<select ng-model="myModelName" ng-init="myModelName=600">
  <option value="600">First</option>
  <option value="700">Second</option>
</select>

কৌণিক> ১.২

<select ng-model="myModelName" ng-init="myModelName='600'">
  <option value="600">First</option>
  <option value="700">Second</option>
</select>

Comments

ধন্যবাদ! আমার ক্ষেত্রে আমি এনজি-থিম ব্যবহার করতে পারি না (কোনও ডিফল্ট মান নেই) তাই আমি আমার মডেলটিকে স্ট্রিংয়ে কাস্ট করেছি এবং এটি কার্যকর হয়েছে!

— রডরিগো গ্রাআ

আমার অ্যাপ্লিকেশন উত্পাদন ইস্যু খুব দরকারী। ধন্যবাদ @Nabil Boag

— Venki

এই কাজ, নিশ্চিত, কিন্তু ভালো অপশন ব্যবহার করা ng-value="600"মধ্যে optionপরিবর্তে value। এটি একটি সংখ্যায় পার্স করবে এবং আপনাকে এখনকার মতো আপনার মানগুলি রূপান্তর করতে হবে না :)

— ম্যাক্স

@ ম্যাক্স আমি প্রচুর উচ্চ মানের উত্তর চেষ্টা করেছি তবে আমি আপনার উত্তর না পাওয়া পর্যন্ত কোনওটিই কাজ করতে পারেনি। ধন্যবাদ.

— অ্যান্ড্রু

Answer 6

এখানে প্রচুর উত্তরের মধ্যে, আমি অনুভব করেছি যে আমি যে সমাধানটি আমার পক্ষে কাজ করেছিলাম এবং নীচের সমস্ত শর্ত পূরণ করেছি তা পুনরায় পোস্ট করব :

• একটি প্রদত্ত স্থানধারক / প্রম্পট যখন NG-মডেল falsy (যেমন "--select region--" W। value="")
• যখন এনজি-মডেলের মানটি মিথ্যা হয় এবং ব্যবহারকারী বিকল্প ড্রপডাউন খুলেন, স্থানধারক নির্বাচন করা হয় (এখানে উল্লিখিত অন্যান্য সমাধানগুলি প্রথম বিকল্পটি প্রদর্শিত হবে যা বিভ্রান্তিকর হতে পারে)
• ব্যবহারকারীকে মূলত জালযুক্ত / ডিফল্ট মানটি নির্বাচন করে একটি বৈধ মান নির্বাচন করতে অনুমতি দিন

কোড

<select name="market_vertical" ng-model="vc.viewData.market_vertical"
    ng-options="opt as (opt | capitalizeFirst) for opt in vc.adminData.regions">

    <option ng-selected="true" value="">select a market vertical</option>
</select>

src

আসল প্রশ্নোত্তর - https://stackoverflow.com/a/32880941/1121919

Comments

আপনি কি ডিফল্ট হয় মানে <option ng-selected="true" value="null">?

— জাস্টোপি

আমার অর্থ যদি এনজি-মডেলটির মানটি নাল, কৌণিক সৃষ্টি এবং খালি বিকল্প হিসাবে সেট করা থাকে

— ফ্লেজকানো

Answer 7

একটি দ্রুত সমাধান:

select option:empty { display:none }

আশা করি এটি কাউকে সাহায্য করবে। আদর্শভাবে, নির্বাচিত উত্তরটি পদ্ধতির হওয়া উচিত তবে যদি এটি সম্ভব না হয় তবে প্যাচ হিসাবে কাজ করা উচিত।

Comments

আমার পরীক্ষা অনুযায়ী এটি কেবল ক্রোম (নতুন ক্রোম, তার উপরে) এবং ফায়ারফক্সে কাজ করবে। আইই ও সাফারি ব্রেক। অপেরা এবং অন্যান্য প্রান্ত ব্রাউজারগুলি সম্পর্কে জানেন না। উভয় ক্ষেত্রেই, এই হল না দুর্ভাগ্যবশত একটি ভাল সমাধান।

— দুদেওয়াদ

<সিলেক্ট> এর বন্ধের আগে এইচটিএমএল এ কোথায় রেখে দেওয়া উচিত বা অন্যথায় জেএসে রাখতে হবে

— এইচ ভার্মা

@ এইচভির্মা এটি একটি সিএসএস বিধি। এটি স্টাইলশিটে বা <স্টাইল> ট্যাগের ভিতরে রাখুন

— কেকে

@KK stackoverflow.com/questions/48355599/... আপনি এই পরীক্ষা করুন করতে পারেন?

— সুদর্শন কালেবরে 24'18

Answer 8

হ্যাঁ এনজি-মডেল খালি বিকল্প মান তৈরি করবে, যখন এনজি-মডেলের সম্পত্তি অপরিজ্ঞাত। আমরা এটিকে এড়াতে পারি, যদি আমরা এনজি-মডেলকে অবজেক্টটি অর্পণ করি

উদাহরণ

কৌণিক কোডিং

$scope.collections = [
    { name: 'Feature', value: 'feature' }, 
    { name: 'Bug', value: 'bug' }, 
    { name: 'Enhancement', value: 'enhancement'}
];

$scope.selectedOption = $scope.collections[0];


<select class='form-control' data-ng-model='selectedOption' data-ng-options='item as item.name for item in collections'></select>

গুরুত্বপূর্ণ তথ্য:

এনজি-মডেলটিতে অবজেক্টের বৈশিষ্ট্যগুলি ব্যবহার করবেন না $ স্কোপ.কলেকশনস [0] বা $ স্কোপ.কলেকশনস [1] এর মতো অ্যারের অবজেক্টটি বরাদ্দ করুন। যদি আপনি সার্ভার থেকে সিলেক্ট বিকল্প মানটি পেয়ে থাকেন, কল ব্যাক ফাংশন ব্যবহার করে, এনজি-মডেলকে অবজেক্ট বরাদ্দ করুন

কৌনিক নথি থেকে নোট

দ্রষ্টব্য: এনজিমোডেল তুলনা করে, মান দিয়ে নয়। বস্তুর একটি অ্যারে বাঁধাই করার সময় এটি গুরুত্বপূর্ণ। একটি উদাহরণ দেখুন http://jsfiddle.net/qWzTb/

আমি অনেকবার চেষ্টা করেছি অবশেষে আমি এটি খুঁজে পেয়েছি।

Answer 9

যদিও @ পকোজলোস্কি.ওপেনসোর্স এবং @ মার্কের উত্তর দুটিই সঠিক, আমি আমার সামান্য পরিবর্তিত সংস্করণটি ভাগ করতে চাই যেখানে আমি সর্বদা তালিকার প্রথম আইটেমটি নির্বাচন করি না কেন, তার মান নির্বিশেষে:

<select ng-options="option.value as option.name for option in typeOptions" ng-init="form.type=typeOptions[0].value">
</select>

Answer 10

আমি কৌনিক 1.4x ব্যবহার করছি এবং আমি এই উদাহরণটি পেয়েছি, তাই আমি নির্বাচনের প্রাথমিক মানটি সেট করতে এনজি-আরএন ব্যবহার করেছি:

<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.id for item in items"></select>

Answer 11

আমি একই সমস্যা সম্মুখীন। আপনি যদি সাধারণ পোস্টের সাথে কৌনিক ফর্ম পোস্ট করে থাকেন তবে আপনি এই সমস্যার মুখোমুখি হবেন, কারণ কৌণিকরূপে আপনি যেভাবে ব্যবহার করেছেন বিকল্পগুলির জন্য মান নির্ধারণ করতে দেয় না। আপনি যদি "form.type" এর মান পান তবে সঠিক মানটি পাবেন। আপনি কৌনিক বস্তুটি এটি ফর্ম পোস্ট নয়, পোস্ট করতে হবে।

Answer 12

একটি সহজ সমাধান হ'ল ফাঁকা মান সহ একটি বিকল্প সেট করা ""আমি দেখতে পেলাম এটি অতিরিক্ত অপরিবর্তিত বিকল্পটিকে সরিয়ে দেয়।

Comments

ডোনেস্ট @ ১.৪.৩ কাজ করে, এটি ফর্মটিতে কেবল দুটি খালি বিকল্প যুক্ত করেছে

— ড্যানি মোলার

Answer 13

ঠিক আছে, আসলে উত্তরটি সহজ সরল: যখন কোনও বিকল্প থাকে যখন কৌণিক দ্বারা স্বীকৃত হয় না, তখন এটি একটি নিস্তেজ অন্তর্ভুক্ত করে। আপনি যেটি ভুল করছেন তা হ'ল আপনি যখন এনজি-অপশনগুলি ব্যবহার করেন, তখন এটি কোনও বস্তু পড়ে say[{ id: 10, name: test }, { id: 11, name: test2 }] right?

আপনার মডেল মানটি এটির সমান হিসাবে মূল্যায়ন করার জন্য এটি যা প্রয়োজন তা বলুন যে আপনি নির্বাচিত মান 10 হতে চান, আপনার মডেলটি { id: 10, name: test }10 টি পছন্দ করার মতো মান হিসাবে সেট করা দরকার , সুতরাং এটি ট্র্যাশ তৈরি করবে না।

আশা করি এটি প্রত্যেককে বুঝতে সহায়তা করে, আমার চেষ্টা করার মোটামুটি সময় ছিল :)

Answer 14

এই সমাধানটি আমার পক্ষে কাজ করে:

<select ng-model="mymodel">    
   <option ng-value="''" style="display:none;" selected>Country</option>
   <option value="US">USA</option>
</select>

Comments

ডাউনভোট এমনটি হতে পারে কারণ বিকল্প উপাদানগুলিতে সিএসএস প্রয়োগ করা সমস্ত ব্রাউজারে কাজ করে না।

— কাফসো

আমি কেবল এটি ক্রোম, ফায়ারফক্স, সাফারি এবং এজতে পরীক্ষা করেছি - সবকিছুই কাজ করছে।

— এমএমএম

@ এমএমএম "সমস্ত ব্রাউজারগুলিতে" আইই অন্তর্ভুক্ত। অনেক ব্যবহারকারী এখনও আইই 10 এবং 11 এর সাথে আটকে আছে, এবং সম্ভবত এই কারণেই ডাউনভোটটি ঘটেছে। ক্রোম, এফএফ, সাফ, এবং এজ "সমস্ত ব্রাউজার" নয়।

— পিকেডি

Answer 15

এটি আমার পক্ষে কাজ করেছে

<select ng-init="basicProfile.casteId" ng-model="basicProfile.casteId" class="form-control">
     <option value="0">Select Caste....</option>
     <option data-ng-repeat="option in formCastes" value="{{option.id}}">{{option.casteName}}</option>
 </select>

Comments

দুঃখের সাথে তালিকায় কেবল বিকল্পটি যুক্ত করুন এবং খালি স্থানটি ছেড়ে যান।

— এ্যামোঁপেটিট

Answer 16

এটি পুরোপুরি সূক্ষ্ম কাজ করে

<select ng-model="contact.Title" ng-options="co for co in['Mr.','Ms.','Mrs.','Dr.','Prof.']">
    <option style="display:none" value=""></option>
</select>

এটি যেভাবে কাজ করে তা হ'ল এটি যে কোনও কিছু বাছাই করার আগে প্রদর্শিত হওয়ার প্রথম বিকল্পটি দেয় এবং display:noneমুছে ফেলা এটি ড্রপডাউনটি তৈরি করে তাই আপনি চাইলে আপনি করতে পারেন

<select ng-model="contact.Title" ng-options="co for co in['Mr.','Ms.','Mrs.','Dr.','Prof.']">
    <option style="display:none" value="">select an option...</option>
</select>

এবং এটি আপনাকে select and optionনির্বাচনের আগে দেয় তবে একবার নির্বাচিত হয়ে গেলে এটি অদৃশ্য হয়ে যায় এবং এটি ড্রপডাউনটিতে প্রদর্শিত হবে না।

Comments

আসলে আপনি নিজের প্রশ্নের উত্তর নিজেই দেন না, তার চেয়েও খারাপ, আপনি কেবল উপাদানটি গোপন করছেন।

— মার্কো

Answer 17

আপনার নিয়ামকটিতে এটি একই চেষ্টা করুন:

$scope.typeOptions = [
    { name: 'Feature', value: 'feature' }, 
    { name: 'Bug', value: 'bug' }, 
    { name: 'Enhancement', value: 'enhancement' }
];
$scope.form.type = $scope.typeOptions[0];

Comments

আমি আপনার পদ্ধতিটি চেষ্টা করেছিলাম তবে দুর্ভাগ্যক্রমে আমি এটি কাজ করতে পারিনি। আপনি কি এই ঝাঁকুনি একবার দেখে নিতে পারেন? jsfiddle.net/5PdaX

— অনিকেত সিনহা

Answer 18

এখানে ঠিক আছে:

যেমন একটি নমুনা তথ্য জন্য:

financeRef.pageCount = [{listCount:10,listName:modelStrings.COMMON_TEN_PAGE},    
{listCount:25,listName:modelStrings.COMMON_TWENTYFIVE_PAGE},
{listCount:50,listName:modelStrings.COMMON_FIFTY_PAGE}];

নির্বাচন বিকল্পটি এর মতো হওয়া উচিত: -

<select ng-model="financeRef.financeLimit" ng-change="financeRef.updateRecords(1)" 
class="perPageCount" ng-show="financeRef.showTable" ng-init="financeRef.financeLimit=10"
ng-options="value.listCount as value.listName for  value in financeRef.pageCount"
></select>

বিন্দু যখন আমরা লিখতে হচ্ছে value.listCountযেমন value.listName, এটি স্বয়ংক্রিয়ভাবে টেক্সট মান value.listNameনির্বাচিত বিকল্পের মান value.listCountযদিও মান স্বাভাবিক 0,1,2 .. ইত্যাদি দেন আমার !!!

আমার ক্ষেত্রে, financeRef.financeLimitপ্রকৃতপক্ষে এটি দখল করছে value.listCountএবং আমি নিয়ন্ত্রকটিতে গতিশীলভাবে আমার ম্যানিপুলেশন করতে পারি।

Answer 19

আমি যোগ করতে চাই যে প্রাথমিক মানটি যদি কোনও প্যারেন্ট উপাদান বা 1.5 উপাদান থেকে বাঁধন থেকে আসে তবে নিশ্চিত করুন যে সঠিক টাইপটি উত্তীর্ণ হয়েছে। যদি @বাইন্ডিংয়ে ব্যবহার করা হয় তবে ভেরিয়েবল পাস হওয়া স্ট্রিং হবে এবং বিকল্পগুলি যেমন are পূর্ণসংখ্যার পরে খালি বিকল্পটি প্রদর্শিত হবে।

হয় initে মানটি যথাযথভাবে পার্স করুন, বা এর সাথে বাঁধাই করা <এবং নয়@ (প্রয়োজনীয়তা না হলে পারফরম্যান্সের জন্য কম প্রস্তাবিত)।

Answer 20

সহজ সমাধান

<select ng-model='form.type' required><options>
<option ng-repeat="tp in typeOptions" ng-selected="    
{{form.type==tp.value?true:false}}" value="{{tp.value}}">{{tp.name}}</option>

Answer 21

আপনার কাছে বিকল্পগুলির নিয়ন্ত্রণ না থাকলে jQuery সহ একটি গ্রাইন্ড সলিউশন

এইচটিএমএল:

<select id="selector" ng-select="selector" data-ng-init=init() >
...
</select>

JS:

$scope.init = function () {
    jQuery('#selector option:first').remove();
    $scope.selector=jQuery('#selector option:first').val();
}

Comments

পাস্কাল, কেউ আপনাকে হ্রাস করেছে কারণ এটি একটি jQuery সমাধান,

— অ্যাঙ্গুলারজেগুলি

প্রশ্নটি আরও কৌণিক আরও খনন করতে বলা হয় ...: - /

— সাহু ভি কুমার

Answer 22

যদি আপনি এই সমস্যাটি সমাধান করতে আপনার মডেলটি এনজি-থিম ব্যবহার করেন:

<select ng-model="foo" ng-app ng-init="foo='2'">

Answer 23

আমার একই সমস্যা ছিল, আমি ("এনজি-মডেল" সরানো) এটি পরিবর্তন করেছে:

<select ng-model="mapayear" id="mapayear" name="mapayear" style="  display:inline-block !important;  max-width: 20%;" class="form-control">
  <option id="removable" hidden> Selecione u </option>
    <option selected ng-repeat="x in anos" value="{{ x.ano }}">{{ x.ano }}
</option>
</select>

এটি:

<select id="mapayear" name="mapayear" style="  display:inline-block !important;  max-width: 20%;" class="form-control">
  <option id="removable" hidden> Selecione u </option>
    <option selected ng-repeat="x in anos" value="{{ x.ano }}">{{ x.ano }}
</option>
</select>

এখন এটি কাজ করছে, তবে আমার ক্ষেত্রে এটি ng.controller থেকে সেই সুযোগটি মুছে ফেলা হয়েছে, আপনি একইটি করেননি কিনা তা পরীক্ষা করে দেখুন।

Answer 24

হাই আমার কাছে কিছু জ্যাকিউরি মোবাইল রেফারেন্স ছিল এবং আমি সেগুলি সরিয়েছি। JQuery মোবাইল দিয়ে উপরের কোনও ফিক্স আমার পক্ষে কাজ করে নি। (যদি কেউ jQuery মোবাইল এবং কৌণিক জেএসের মধ্যে দ্বন্দ্ব ব্যাখ্যা করতে পারে তবে এটি দুর্দান্ত)

https://guntucomputerhacks.blogspot.com.au/2017/10/angular-js-drop-down-first-options-vs.html

Answer 25

আমার জন্য একমাত্র কাজটি ব্যবহার করা track byহয় ng-options, এটির মতো:

 <select class="dropdown" ng-model="selectedUserTable" ng-options="option.Id as option.Name for option in userTables track by option.Id">

Comments

যদি আমি ব্যবহার এই ng-optionঅ্যারের সর্বশেষ মান যা আমি সেট মান চান তা পেতে optionএর select। এটি সমাধান হয়নি :(

— rufatZZ

Answer 26

এই সমস্যাগুলি কীভাবে কাটিয়ে উঠতে হয় অ্যাঙ্গুলারজ ডকুমেন্টেশন থেকে উদাহরণটি দেখুন।

1. এখানে এই ডকুমেন্টেশন লিঙ্ক যান
2. ' এনজিএমডেল পার্সিং / ফর্ম্যাটিংয়ের মাধ্যমে একটি নন-স্ট্রিং মানটিতে বাইন্ডিং নির্বাচন সন্ধান করুন '
3. সেখানে আপনি দেখতে পাচ্ছেন, ' রূপান্তরকরণসংখ্যা ' নামক নির্দেশিকাটি সমস্যার সমাধান করে।

এটা আমার জন্য কাজ করে. এটি এখানে কীভাবে কাজ করে তাও দেখতে পারেন

Answer 27

আমরা প্রথম বিকল্পটি আড়াল করার জন্য সিএসএস ব্যবহার করতে পারি, তবে এটি আইই 10, 11-এ কাজ করবে না The এই সমাধানটি ক্রোম এবং আই 10, 11-এ পরীক্ষিত প্রধান ব্রাউজারের জন্য কাজ করে

এছাড়াও আপনি যদি কৌণিক ব্যবহার করছেন তবে কিছু সময় সেটটাইমআউট কাজ করে

$scope.RemoveFirstOptionElement = function (element) {
    setTimeout(function () {
        $(element.children()[0]).remove();
    }, 0);
};