angularjs - tutorial - react js




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

আমি গত কয়েক সপ্তাহ ধরে 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 ব্যবহার করলে এটি অদ্ভুত দেখায়।


অনুরূপ কিছু আমার খুব ঘটছে এবং 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>

আপনি অপশন নিয়ন্ত্রণ না যখন 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">


আমি 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>

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

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


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

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


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

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

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

select option:empty { display:none }

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


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

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

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.listCount হিসাবে, এটি স্বয়ংক্রিয়ভাবে মূল্যের পাঠ্যকে value.listNamevalue.listName তবে নির্বাচিত বিকল্পের মানটি মান। value.listCount যদিও আমার মানগুলি স্বাভাবিক দেখায় 0,1,2 .. এবং এভাবে !!!

আমার ক্ষেত্রে, financeRef.financeLimit প্রকৃতপক্ষে financeRef.financeLimit grabbing হয় এবং আমি গতিশীলভাবে নিয়ামক আমার ম্যানিপুলেশন করতে পারেন।


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

  • যখন 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


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

আপনি 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 ব্যবহার করুন


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

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

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


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

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

সহজ সমাধান

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


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

উদাহরণ

কৌণিক কোডিং

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

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


ng-model দ্বারা উল্লিখিত মানটি ng-model বিকল্পগুলিতে পাস করা বিকল্পগুলির একটি সেটে বিদ্যমান না থাকলে খালি option উত্পন্ন হয়। এটি হ'ল দুর্ঘটনাজনিত মডেল নির্বাচনকে বাধাগ্রস্ত করে: AngularJS দেখতে পারে যে প্রাথমিক মডেলটি অনির্ধারিত বা বিকল্পগুলির সেটের মধ্যে নয় এবং নিজের মডেল মডেলটি নির্ধারণ করতে চায় না।

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

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

এখানে JsFiddle: http://jsfiddle.net/MTfRD/3/

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



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





angularjs