AngularJS এবং এনজি-রিপিট দিয়ে নির্বাচন শুরু করা হচ্ছে Initial

133

আমি AngularJS 1.1.5 এর সাথে এনজি-রিপিট ব্যবহার করে প্রাক-ভরাট বিকল্পটি দিয়ে শুরু করার জন্য নির্বাচন-বাক্সটি পাওয়ার চেষ্টা করছি। পরিবর্তে নির্বাচন সর্বদা নির্বাচিত কিছুই না দিয়ে শুরু হয়। এটিতে একটি খালি বিকল্পও রয়েছে, যা আমি চাই না। আমি মনে করি যে কিছুই নির্বাচিত হচ্ছে না এর পার্শ্ব প্রতিক্রিয়া আছে।

আমি এনজি-রিপিটের পরিবর্তে এনজি-অপশন ব্যবহার করে এই কাজটি পেতে পারি তবে আমি এই ক্ষেত্রে এনজি-রিপিট ব্যবহার করতে চাই। যদিও আমার সঙ্কীর্ণ উদাহরণটি এটি দেখায় না, আমি প্রতিটি বিকল্পের শিরোনাম বৈশিষ্ট্যটিও সেট করতে চাই এবং এনজি-অপশনগুলি ব্যবহার করার কোনও উপায় নেই, যতদূর আমি জানি।

আমি মনে করি না এটি সাধারণ কৌণিক জেসস / প্রোটোটাইপিকাল উত্তরাধিকার ইস্যুর সাথে সম্পর্কিত। অন্তত আমি বাটারং পরিদর্শন করার সময় সুস্পষ্ট কিছু দেখতে পাচ্ছি না। এছাড়াও, আপনি যখন ইউআই এর সাথে বাছাইয়ে কোনও বিকল্প চয়ন করেন, তখন মডেলটি সঠিকভাবে আপডেট হয়।

এইচটিএমএল এখানে:

<body ng-app ng-controller="AppCtrl">
    <div>
        Operator is: {{filterCondition.operator}}
    </div>
    <select ng-model="filterCondition.operator">
       <option 
           ng-repeat="operator in operators" 
           value="{{operator.value}}"
       >
           {{operator.displayName}}
       </option>
    </select>
</body>

এবং জাভাস্ক্রিপ্ট:

function AppCtrl($scope) {

    $scope.filterCondition={
        operator: 'eq'
    }

    $scope.operators = [
        {value: 'eq', displayName: 'equals'},
        {value: 'neq', displayName: 'not equal'}
     ]
}

এর জন্য জেএস ফিডল: http://jsfiddle.net/coverbeck/FxM3B/2/

javascript angularjs

— চার্লস ও।
সূত্র

1

এনজিওপশনটি তৈরি করা হয়েছিল কারণ এনজিআরপিট দিয়ে এটি করার কোনও পরিষ্কার উপায় ছিল না। বিকল্পটি নির্বাচিত হওয়ার পরে এনজিআরপিটল এনআরোলগুলি পুনরায় করুন। আপনি কি নিজের বিকল্পগুলিতে এনজিস্টিক্ট স্থাপনের চেষ্টা করেছেন

— TheSharpieOne

হ্যাঁ! এনজিএসলেটেড কাজ করেছে! আমি একটি আপডেট ওয়ার্কিং জেএসফিডাল পোস্ট করব।

— চার্লস ও।

এটি লক্ষ করা উচিত যে AngualrJS 1.2 এ এই কোডটি আলাদাভাবে কাজ করে - এটি একটি নতুন খালি <অপশন> উপাদান তৈরি করে না, তবে এটি কেবলমাত্র তালিকা বাক্সে প্রথম বিকল্পটি নির্বাচন করতে সক্ষম। আপনি এটি এখানে

— VitalyB

226

ঠিক আছে. আপনি যদি সঠিক উপায়ে ব্যবহার করতে না চান ng-options, আপনি প্রাক-বাছাইয়ের কাজটি করার নির্দেশের ng-selectedজন্য শর্ত পরীক্ষা করার যুক্তি দিয়ে বৈশিষ্ট্য যুক্ত করতে পারেন option।

<select ng-model="filterCondition.operator">
    <option ng-selected="{{operator.value == filterCondition.operator}}"
            ng-repeat="operator in operators"
            value="{{operator.value}}">
      {{operator.displayName}}
    </option>
</select>

Working Demo

— zs2020
সূত্র

37

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

— চার্লস ও।

ধন্যবাদ, কিছু বিকল্প অক্ষম করার একটি সহজ উপায় ছিল।

— ডোরিয়ান

11

এনজি-বিকল্পগুলি যতক্ষণ তার ব্যবহারের ক্ষেত্রে আপনার উপযুক্ত হয় ততক্ষণ সঠিক। অপশন / অপ্টগ্রুপ ক্ষেত্র ইত্যাদিতে আপনার অতিরিক্ত গুণাবলী / ক্লাসের প্রয়োজন হতে পারে

— mystrdat

6

"সঠিক উপায়" কখনও কখনও কাজ করে না (উদাহরণস্বরূপ, আপনি যদি বিকল্পগুলির নামগুলি জনপ্রিয় করে তোলা স্ট্রিংগুলি অনুবাদ করতে চান)

— বিটিকে

11

আমি মনে করি এনজি-সিলেক্টড এক্সপ্রেশনটি {{}}: এনজি-সিলেক্টড = "অপারেটর.ভ্যালু == ফিল্টারকন্ডিশন.ওপরেটর"

— ছাড়াই থাকতে হবে

35

নির্বাচনী ট্যাগের জন্য, কৌণিক এনজি-বিকল্পগুলির নির্দেশনা সরবরাহ করে। এটি আপনাকে বিকল্পগুলি সেট আপ করতে এবং একটি ডিফল্ট সেট করার জন্য নির্দিষ্ট কাঠামো দেয়। প্রত্যাশা অনুযায়ী কাজ করে এমন এনজি-অপশনগুলি ব্যবহার করে আপডেট করা ফিটল এখানে দেওয়া হয়েছে: http://jsfiddle.net/FxM3B/4/

আপডেট হওয়া এইচটিএমএল (কোড একই থাকে)

<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator}}</div>
<select ng-model="filterCondition.operator" ng-options="operator.value as operator.displayName for operator in operators">
</select>
</body>

— জেরেমি লাইকনেস
সূত্র

3

হাই জেরেমি - আমি এনজি-বিকল্পগুলি ছাড়াই এটি করার চেষ্টা করছি। আমি আমার প্রশ্নে এবং শনের জবাবে বলেছি, আমি প্রতিটি বিকল্পের শিরোনামের বৈশিষ্ট্যটি সেট করতে চাই, এবং আমি যতদূর জানি এনজি-অপশনগুলির সাথে এটি করতে পারি না। ধন্যবাদ, চার্লস

— চার্লস ও।

9

NG- নির্বাচিত বিকল্পটি নির্দেশ করার জন্য TheSharpieOne কে ধন্যবাদ । যদি এটি একটি মন্তব্য হিসাবে উত্তর না করে পোস্ট করা হয়, আমি যে সঠিক উত্তর করতে হবে।

এখানে একটি কার্যকরী জেএসফিডাল: http://jsfiddle.net/coverbeck/FxM3B/5/ ।

আমি আমার মূল পোস্টে যে শিরোনামের বৈশিষ্ট্যটি রেখেছি তা ব্যবহার করার জন্য আমিও ফিডালটি আপডেট করেছি, কারণ এটি সমস্যার কারণ ছিল না (তবে এটি এনজি-বিকল্পগুলির পরিবর্তে আমি এনজি-রিপিট ব্যবহার করতে চাই) ।

এইচটিএমএল:

<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator}}</div>
<select ng-model="filterCondition.operator">
   <option ng-repeat="operator in operators" title="{{operator.title}}" ng-selected="{{operator.value == filterCondition.operator}}" value="{{operator.value}}">{{operator.displayName}}</option>
</select>
</body>

জাতীয়:

function AppCtrl($scope) {

    $scope.filterCondition={
        operator: 'eq'
    }

    $scope.operators = [
        {value: 'eq', displayName: 'equals', title: 'The equals operator does blah, blah'},
        {value: 'neq', displayName: 'not equal', title: 'The not equals operator does yada yada'}
     ]
}

— চার্লস ও।
সূত্র

একটি মন্তব্য হিসাবে পোস্ট করার জন্য দুঃখিত। আমি উদাহরণ তৈরি করার মতো বোধ করি নি এবং এটি কাজ করবে আমি 100% নিশ্চিত নই। এটা ছিল শুধু একটি কুঁচকির।

— TheSharpieOne

9

কৌণিকটি নির্বাচনের ক্ষেত্রে একটি খালি বিকল্প উপাদানটি ইনজেকশন দিচ্ছে তা হ'ল ডিফল্টরূপে এটির সাথে আবদ্ধ হওয়া মডেল অবজেক্টটি শুরুর দিকে খালি মান সহ আসে।

আপনি যদি কোনও ডিফল্ট বিকল্প নির্বাচন করতে চান তবে আপনি সম্ভবত এটি নিয়ামকের স্কোপে সেট করতে পারেন

$scope.filterCondition.operator = "your value here";

আপনি যদি খালি বিকল্পের স্থানধারক চান তবে এটি আমার পক্ষে কাজ করে

<select ng-model="filterCondition.operator" ng-options="operator.id as operator.name for operator in operators">
  <option value="">Choose Operator</option>
</select>

— Ammadu
সূত্র

2

এটি ভাল, তবে কৌণিক একটি ফাঁকা বিকল্প তৈরি করে। কীভাবে এড়ানো যায়?

— মার্সেলো বারবোসা

1

প্রস্তাবিত হিসাবে আপনাকে এনজি-অপশনগুলি ব্যবহার করতে হবে এবং দুর্ভাগ্যক্রমে আমি বিশ্বাস করি যে আপনাকে ডিফল্টর জন্য অ্যারে উপাদানটি উল্লেখ করতে হবে (যদি না অ্যারেটি স্ট্রিংয়ের অ্যারে না থাকে)।

http://jsfiddle.net/FxM3B/3/

জাভাস্ক্রিপ্ট:

function AppCtrl($scope) {


    $scope.operators = [
        {value: 'eq', displayName: 'equals'},
        {value: 'neq', displayName: 'not equal'}
     ]

    $scope.filterCondition={
        operator: $scope.operators[0]
    }
}

এইচটিএমএল:

<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator.value}}</div>
<select ng-model="filterCondition.operator" ng-options="operator.displayName for operator in operators">
</select>
</body>

— shaunhusain
সূত্র

আপনি কি জানেন এবং কেন আপনি নিশ্চিত? ডকুমেন্টেশন ( docs.angularjs.org/api/ng.directive:select ) বলছে যে একটি স্ট্রিং- বিন্যাসের সাথে আবদ্ধ হওয়ার সময় আপনাকে কেবল এনজি-বিকল্পগুলি ব্যবহার করতে হবে। যেমন আমি বলেছি আমি শিরোনামের বৈশিষ্ট্যটি ব্যবহার করতে চাই, এবং এনজি-বিকল্পগুলির সাথে এটি করার কোনও উপায় নেই। <বিকল্প শিরোনাম = "এই পছন্দটির একটি দীর্ঘ দীর্ঘ বিবরণ" এর মতো কিছু ...> ধন্যবাদ Thanks

— চার্লস ও।

আমি বিশ্বাস করি ডক্সে থাকা নোটটি কিছুটা অস্পষ্ট এবং এর অর্থ হ'ল আপনাকে মডেলটির জন্য একটি স্ট্রিং ব্যবহার করতে হবে এবং বিকল্পগুলির জন্য স্ট্রিংগুলির একটি অ্যারে থাকতে হবে। যদি আপনি "শিরোনাম" বৈশিষ্ট্যটি ব্যবহার করার যুক্তিটি মনে করেন তবে আমি এটি ডাব্লু 3 সি w3schools.com/tags/tag_option.asp এ দেখছি না এবং এটি সত্যিই ব্যবহার করে পুনরায় স্মরণ করতে পারি না। আপনি কি কেবলমাত্র অবজেক্টগুলিতে বিবরণ সংরক্ষণ করতে পারবেন না তবে এখনও সেই তথ্যটি পুনরুদ্ধার করতে পারেন যেহেতু মডেলটি এখন যার সাথে আবদ্ধ?

— শানুহসাইন

আপনি যে ডাব্লু 3 সি পৃষ্ঠায় লিঙ্ক করেছেন, আপনি যদি গ্লোবাল অ্যাট্রিবিউট লিঙ্কে ক্লিক করেন তবে আপনি দেখতে পাবেন যে শিরোনাম বৈশিষ্ট্যটি বিকল্প উপাদান দ্বারা সমর্থিত। আমি শিরোনাম বৈশিষ্ট্যটি কেবলমাত্র "টুলটিপ" পাঠ্যটি প্রদর্শন করতে ব্যবহার করছি, যাতে আপনি যদি কোনও বিকল্পের উপর ঘুরে বেড়ান তবে আপনি বিকল্পটির অর্থ কী তার একটি বৃহত্তর বিবরণ পেতে পারেন। এটি একটি ছোট জিনিস, তবে সম্ভব হলে ভাল লাগবে।

— চার্লস ও।

@CharlesO। আমি ঠিক তোমার মতো করতে চাই একটি অবজেক্ট সেট করুন (নন-স্ট্রিং মান) তবে আমি বিকল্প তালিকায় একটি শিরোনামও ব্যবহার করতে চাই। এটির কোন সমাধান আছে. আমি এটি খুঁজে পাচ্ছি না ...

— উইল্ট

1

আপনি যদি কৌণিক উপাদান থেকে এমডি-সিলেক্ট এবং এনজি-রিপিটেন্ট এমডি-বিকল্প ব্যবহার করছেন তবে আপনি এই কলমেng-model-options="{trackBy: '$value.id'}" প্রদর্শিত এমডি-নির্বাচন ট্যাগ অ্যাশ যুক্ত করতে পারেন

কোড:

<md-select ng-model="user" style="min-width: 200px;" ng-model-options="{trackBy: '$value.id'}">
  <md-select-label>{{ user ? user.name : 'Assign to user' }}</md-select-label>
  <md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option>
</md-select>

স্নিপেট প্রসারিত করুন

— জাপেথ ওঙ্গেরি - ইনকালিমেভা
সূত্র