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




react js (20)

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

এখানে জেড:

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>

এটা পরিত্রাণ পেতে কি করতে হবে?

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


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

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

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

<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>

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

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

এটা সবাই বুঝতে সাহায্য করে, আমি চেষ্টা একটি রুক্ষ সময় :)


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

Either init এর মান সঠিকভাবে প্যারাস করুন, অথবা < এবং not @ সাথে বাঁধাই (প্রয়োজনীয় না হওয়া পর্যন্ত কর্মক্ষমতার জন্য কম সুপারিশকৃত)।



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


এই সমাধান আমার জন্য কাজ করে:

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

আপনি অপশন নিয়ন্ত্রণ না যখন jQuery সঙ্গে একটি grind সমাধান

এইচটিএমএল:

<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();
}

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

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


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

উদাহরণ

কৌণিক কোডিং

$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>

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

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

কৌণিক নথি থেকে উল্লেখ্য

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

আমি অনেক সময় চেষ্টা করেছি অবশেষে আমি এটি পাওয়া যায়।


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


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

<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>

কৌণিক> 1.2

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

এই পুরোপুরি জরিমানা কাজ করে

<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 করার আগে select and option কিন্তু একবার নির্বাচিত হলে এটি অদৃশ্য হয়ে যাবে এবং এটি ড্রপডাউনে প্রদর্শিত হবে না।


কৌণিক <1.4

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

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

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

কৌণিক> = 1.4

নির্বাচন এবং বিকল্পের নির্দেশাবলীর পুনঃবিবেচনা করার কারণে, ng-if আর ব্যবহার করার বিকল্পটি এখন আর কার্যকর নয় তাই আপনাকে এটি পুনরায় কাজ করার জন্য ng-show="false" করতে হবে।


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

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

কোড

<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://.com/a/32880941/1121919


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

select option:empty { display:none }

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


কারো জন্য হয়তো দরকারী হতে পারে:

আপনি ng-বিকল্পগুলির পরিবর্তে সাধারণ বিকল্পগুলি ব্যবহার করতে চান তবে আপনি নীচের মত করতে পারেন:

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

মডেল ইনলাইন সেট করুন। খালি বিকল্প পরিত্রাণ পেতে ng-init ব্যবহার করুন


আমি Angular 1.4x ব্যবহার করছি এবং আমি এই উদাহরণটি খুঁজে পেয়েছি, তাই আমি সিলেক্টেড প্রাথমিক মান সেট করতে ng-init ব্যবহার করেছি:

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

এটা আমার জন্য কাজ করেছে

<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>

একই নিয়মে আপনার কন্ট্রোলারের মধ্যে এটি ব্যবহার করুন:

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

আমি একই সমস্যা ছিল, আমি (মুছে ফেলা হয়েছে "এনজি মডেল") এই পরিবর্তন:

<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>

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


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

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





angularjs