অ্যাংুলারজেএস-এ শর্তাধীন বৈশিষ্ট্য প্রয়োগ করার সর্বোত্তম উপায় কী?

Question

সুযোগের বুলিয়ান ভেরিয়েবলের ভিত্তিতে উপাদানগুলিতে উদাহরণস্বরূপ "সন্তোষজনক" যুক্ত করতে আমার সক্ষম হওয়া দরকার।

উদাহরণ ব্যবহার:

<h1 attrs="{'contenteditable=\"true\"': editMode}">{{content.title}}</h1>

যদি $scope.editModeসেট করা থাকে তবে উপাদানটিতে যুক্ত হওয়ার যোগ্য = সত্য সংযুক্ত হওয়ার ফল হবে true। এই এনজি-ক্লাসের অ্যাট্রিবিউট আচরণের মতো কার্যকর করার কোনও সহজ উপায় আছে কি? আমি একটি নির্দেশিকা লিখতে এবং না ভাগ করে নেওয়ার কথা বিবেচনা করছি।

সম্পাদনা: আমি দেখতে পাচ্ছি যে আমার প্রস্তাবিত অ্যাটর্স ডিরেক্টর এবং এনজি-বাইন্ড-অ্যাটর্সগুলির মধ্যে কিছু মিল রয়েছে বলে মনে হচ্ছে , তবে এটি 1.0.0.rc3 এ সরানো হয়েছে , কেন তাই?

Comments

আমি এরকম কিছু পারিনি। আমি ভোট দিয়েছি! : ডি সম্ভবত এটি কৌনিক প্রকল্পে জমা দিন। এনজি-ক্লাসের সাথে আরও ভাল মেলে এমন একটি সিনট্যাক্সটি দুর্দান্ত হবে। ng-attr="expression"।

— পরীক্ষিত

আমি অবশ্যই হ্যাঁ বিবেচনা করছি!

— কেনেথ লিন

এটি আসলে এনজিক্লাস বা এনজিস্টাইলের মতো নয় কারণ তারা একটি একক বৈশিষ্ট্য নিয়ন্ত্রণ করে এবং আপনি কোনও বৈশিষ্ট্য নিয়ন্ত্রণ করতে চান । আমি মনে করি কোনও contentEditableদিকনির্দেশনা তৈরি করা ভাল be

— জোশ ডেভিড মিলার

@ জোশডাভিডমিলার এটিতে +1 আমি মনে করি যে কোনও বৈশিষ্ট্য নিয়ন্ত্রণ করতে সক্ষম হওয়ায় সামান্য সুবিধা রয়েছে, বিশেষত জটিলতা বিবেচনা করে। আপনার শর্তাধীন কোনও ভেরিয়েবলের উপর নির্দেশনা থাকতে পারে।

— উমুর কনটাসেক

<h1 ng-attr-contenteditable="{{editMode && true : false}}">{{content.title}}</h1>

— মিয়া

Answer 1

এনজি-ক্লাস ব্যবহার করা যাবে না (শর্তসাপেক্ষে এসভিজি স্টাইল করার সময়) আমি শর্তাধীন শ্রেণি অ্যাটর সেট করতে নিম্নলিখিতটি ব্যবহার করছি:

ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"

একই বৈশিষ্ট্য অন্যান্য বৈশিষ্ট্য ধরণের জন্য কাজ করা উচিত।

(আমি মনে করি এনজি-অ্যাটর- ব্যবহার করার জন্য আপনার সর্বশেষতম অস্থির কৌণিক হওয়া উচিত, আমি বর্তমানে ১.১.৪ এ আছি)

Comments

কেবল এই উত্তরটি পরিষ্কার করার জন্য: আপনি যদি কোনও গুণাবলীর সাথে উপস্থাপন করেন ng-attr-তবে সংকলকটি উপসর্গটি ছাঁটাবে এবং মূল বৈশিষ্ট্যের মান থেকে কৌণিক অভিব্যক্তির ফলাফলের সাথে আবদ্ধ তার মানটির সাথে বিশিষ্টটিকে যুক্ত করবে ।

— ম্যাথিয়াস

আমার মতে আপনি যদি কোনও টার্নারি অপারেটর ব্যবহার করেন তবে এটি পড়া সহজ, যার জন্য 1.1.5 তে সমর্থন যুক্ত করা হয়েছিল। এর মতো দেখতে হবে: ond {কিছু শর্তসাপেক্ষ? 'শ্রেণি-কখন-সত্য': 'শ্রেণি-কখন-মিথ্যা'}}

— dshap

এই পদ্ধতির সাথে সমস্যাটি হ'ল ফলাফল নির্বিশেষে বৈশিষ্ট্যটি তৈরি হয়। আদর্শভাবে আমরা নিয়ন্ত্রণের সাথে চাই বা বৈশিষ্ট্যটি মোটেই তৈরি হয় না।

— এয়ারটোনিক্স

নোট করুন যে এনজি-অ্যাটর-স্টাফগুলি কৌণিক 1.2 থেকে সরানো হয়েছিল। এই আনসারটি আর বৈধ নয়।

— এহুদা গ্যাব্রিয়েল হিমাঙ্গো 21

আপনি ভুল. এই প্রকল্প github.com/codecapers/AngularJS- ফ্লোচার্টটি কৌনিক 1.2 এবং এনজি-অ্যাটার- ব্যবহার করে। এছাড়াও সর্বশেষতম দস্তাবেজগুলিতে (কৌনিক 1.4) এখনও এনজি-অ্যাটর- অন্তর্ভুক্ত রয়েছে

— অ্যাশলে ডেভিস

Answer 2

আপনি ng-attrএকটি কৌণিক অভিব্যক্তি প্রকাশ করতে বৈশিষ্ট্যগুলি উপসর্গ করতে পারেন । যখন এক্সপ্রেশনগুলির ফলাফল অপরিবর্তিত হয় তখন এটি বৈশিষ্ট্য থেকে মানটি সরিয়ে দেয়।

<a ng-attr-href="{{value || undefined}}">Hello World</a>

উত্পাদন করবে (যখন মানটি মিথ্যা থাকে)

<a ng-attr-href="{{value || undefined}}" href>Hello World</a>

সুতরাং ব্যবহার করবেন না falseকারণ এটি মান হিসাবে "মিথ্যা" শব্দটি তৈরি করবে।

<a ng-attr-href="{{value || false}}" href="false">Hello World</a>

কোনও নির্দেশে এই কৌশলটি ব্যবহার করার সময়। নির্দেশের জন্য বৈশিষ্ট্যগুলি ভুয়া হবে যদি তারা কোনও মূল্য অনুপস্থিত থাকে।

উদাহরণস্বরূপ, উপরেরটি মিথ্যা হবে।

function post($scope, $el, $attr) {
      var url = $attr['href'] || false;
      alert(url === false);
}

Comments

আমি এই উত্তর পছন্দ। যাইহোক, আমি মনে করি না মানটি যদি অপরিবর্তিত থাকে তবে এটি বৈশিষ্ট্যটি আড়াল করবে। যদিও আমি কিছু মিস করছি। সুতরাং প্রথম ফলাফলটি হবে <a ng-attr-href="{{value || undefined}}" href> হ্যালো ওয়ার্ল্ড </a>

— রোমান কে

@ রোমানকে হাই, ম্যানুয়ালটিতে বলা হয়েছে যে undefinedএটি একটি বিশেষ ক্ষেত্রে। "এনজিএটিআরটি ব্যবহার করার সময়, p ইন্টারপোলেটের অলঅরনিথিং ফ্ল্যাগ ব্যবহার করা হয়, সুতরাং যদি ইন্টারপোল্টেড স্ট্রিংয়ের কোনও অভিব্যক্তি অপরিজ্ঞায়িত হয়ে থাকে তবে বৈশিষ্ট্যটি সরানো হবে এবং উপাদানটিতে যুক্ত না করা হবে।"

— বিক্রিয়াকারী

ভবিষ্যতের যে কোনও পাঠককে সহায়তা করার জন্য কেবল একটি নোট, অ্যাঙ্গুলার ১.৩ এ 'অপরিজ্ঞাত' আচরণ যুক্ত হয়েছে বলে মনে হয়। আমি 1.2.27 ব্যবহার করছি এবং বর্তমানে অবশ্যই আই 8।

— অ্যাডাম মার্শাল

আরও কিছু কৌণিক 1.2.15 টি নিশ্চিত করার জন্য মানটি অপরিজ্ঞাতকৃত এমনকি href প্রদর্শিত হবে, উপরের মন্তব্য হিসাবে বলা হয়েছে যে কৌণীয় ১.৩ এ অপরিজ্ঞাত আচরণ শুরু হয়।

— ব্রায়ান ওগডেন

এটা তোলে দয়া করে মনে রাখবেন গুরুত্বপূর্ণ ng-attr-fooলেগে থাকব সবসময় ডাকা fooনির্দেশ যদি উপস্থিত থাকে, এমনকি ng-attr-fooমূল্যায়ণ undefined। আলোচনা

— হিউজেস

Answer 3

আমি এট্রিবিউটটি শক্ত করে সেট করে এই কাজটি পেয়েছি। এবং অ্যাট্রিবিউটের জন্য বুলিয়ান মান ব্যবহার করে অ্যাট্রিবিউট প্রয়োগযোগ্যতা নিয়ন্ত্রণ করে।

কোড স্নিপেট এখানে:

<div contenteditable="{{ condition ? 'true' : 'false'}}"></div>

আশা করি এটা কাজে লাগবে.

Comments

যেহেতু কৌণিক আইআইএফ এক্সপ্রেশনকে বিশ্লেষণ করতে পারে এটি বর্তমান সুযোগে রাষ্ট্রের মূল্যায়ন এবং সেই রাজ্যের উপর ভিত্তি করে মান নির্ধারণের জন্য পুরোপুরি কাজ করে।

— এমসিএকাইনজ

Answer 4

অ্যাঙ্গুলার (1.1.5) এর সর্বশেষ সংস্করণে, তারা একটি শর্তযুক্ত নির্দেশিকা অন্তর্ভুক্ত করেছে ngIf। এটির থেকে ngShowএবং পৃথক ngHideযে উপাদানগুলি লুকানো নয়, তবে এটি ডমটিতে মোটেই অন্তর্ভুক্ত নয়। এগুলি তৈরির জন্য ব্যয়বহুল তবে ব্যবহার করা হয় না এমন উপাদানগুলির জন্য এটি খুব দরকারী:

<h1 ng-if="editMode" contenteditable=true>{{content.title}}</h1>

Comments

আমি বিশ্বাস করি এনজি-ইফ কেবলমাত্র একটি উপাদান স্তরে কাজ করে, এটি হ'ল আপনি কোনও উপাদানের মাত্র একটি বৈশিষ্ট্যে শর্তসাপেক্ষ নির্দিষ্ট করতে পারবেন না।

— ম্যাক্স স্ট্রটার 21'44

আসলে, তবে আপনি তা করতে পারেন<h1 ng-if="editMode" contenteditable="true"><h1 ng-if="!editMode">

— বাইস্ক্রিপ্টস

সাবধান, তবে, এটি ng-ifএকটি নতুন সুযোগ তৈরি করে।

— শিমন রাচলেনকো

@ শিমন রাচলেনকো সম্মত! এটি বিভ্রান্তি এবং বাগগুলির একটি বড় উত্স হতে পারে। ng-ifএকটি নতুন সুযোগ তৈরি ng-showকরে কিন্তু তা করে না। এই অসঙ্গতিটি আমার জন্য সর্বদা এক কালশিটে জায়গা হয়ে আছে। এর প্রতিরক্ষামূলক প্রোগ্রামিং প্রতিক্রিয়া হ'ল: "সর্বদা এমন কোনও কিছুকে আবদ্ধ করুন যা অভিব্যক্তিতে একটি বিন্দু" এবং এটি কোনও সমস্যা হবে না।

— ব্রায়ান জেনিসিও

আপনি যদি এমন কোনও বৈশিষ্ট্য যুক্ত করতে চান যা আসলে নির্দেশিকা হয় তবে এটি দুর্দান্ত কাজ করে। কোড সদৃশ সম্পর্কে লজ্জা

— অ্যাডাম মার্শাল

Answer 5

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

ng-attr-example="{{params.type == 'test' ? 'itWasTest' : undefined }}"

ব্যবহারের উদাহরণ:

<div ng-attr-class="{{params.type == 'test' ? 'itWasTest' : undefined }}">

আউটপুট <div class="itWasTest">বা <div>মান এর উপর ভিত্তি করেparams.type

Answer 6

<h1 ng-attr-contenteditable="{{isTrue || undefined }}">{{content.title}}</h1>

সত্য হবে যখন উত্পাদিত হবে = সত্য: <h1 contenteditable="true">{{content.title}}</h1>

এবং কখন isTrue = মিথ্যা: <h1>{{content.title}}</h1>

Comments

আমি যদি <h1

— কনটেনটেটেবল

<h1 ng-attr-contenteditable="{{isTrue ? 'row' : undefined}}">{{content.title}} </h1>

— ফ্যাটবাক

এটি আমার গ্রহণযোগ্য উত্তর হওয়া উচিত। আমার <video ng-attr-autoplay="{{vm.autoplay || undefined}}" />

— দৃশ্যটি

Answer 7

গৃহীত সমাধান সম্পর্কে, অ্যাশলে ডেভিস যে পোস্ট করেছেন, বর্ণিত পদ্ধতিটি এখনও ডিওএম-তে গুণাবলী মুদ্রণ করে, নির্ধারিত মান নির্বিশেষে তা নির্বিশেষে।

উদাহরণস্বরূপ, একটি এনজি-মডেল এবং একটি মান বৈশিষ্ট্য উভয় সহ একটি ইনপুট ফিল্ড সেটআপে:

<input type="text" name="myInput" data-ng-attr-value="{{myValue}}" data-ng-model="myModel" />

যাই হোক না কেন myValue এর পিছনে কি, মান বৈশিষ্ট্যটি এখনও মুদ্রিত হয়, সুতরাং, ব্যাখ্যা করা। এরপরে এনজি-মডেলটি ওভাররাইড হয়ে যায়।

কিছুটা অপ্রীতিকর, তবে এনজি-ইফ ব্যবহার করা কৌশলটি করে:

<input type="text" name="myInput" data-ng-if="value" data-ng-attr-value="{{myValue}}" data-ng-model="myModel" />
<input type="text" name="myInput" data-ng-if="!value" data-ng-model="myModel" />

আমি এনজি-যদি নির্দেশের ভিতরে আরও বিস্তারিত চেক ব্যবহার করার পরামর্শ দেব :)

Comments

এই পদ্ধতির সাথে, আপনি একই কোডটি পুনরাবৃত্তি করবেন।

— কল্যাণ

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

— অ্যালেক্স

Answer 8

এছাড়াও আপনি এর মত একটি এক্সপ্রেশন ব্যবহার করতে পারেন:

<h1 ng-attr-contenteditable="{{ editMode ? true : false }}"></h1>

Answer 9

আমি কয়েক মাস আগে এটি করার জন্য একটি প্যাচ লিখেছিলাম (কেউ যদি ফ্রেইনোডে #angularjs এ সম্পর্কে জিজ্ঞাসা করার পরে)।

এটি সম্ভবত মার্জ করা হবে না তবে এটি এনজিক্লাসের সাথে খুব মিল: https://github.com/angular/angular.js/pull/4269

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

Answer 10

ইনপুট ফিল্ড বৈধতার জন্য আপনি এটি করতে পারেন:

<input ng-model="discount" type="number" ng-attr-max="{{discountType == '%' ? 100 : undefined}}">

এই বৈশিষ্ট্য প্রয়োগ করা হবে maxথেকে 100যদি শুধু discountTypeহিসাবে সংজ্ঞায়িত করা হয়%

Answer 11

সম্পাদনা করুন : এই উত্তরটি Angular2 + এর সাথে সম্পর্কিত! দুঃখিত, আমি ট্যাগ মিস!

আসল উত্তর:

খুব সাধারণ ক্ষেত্রে আপনি যখন কোনও নির্দিষ্ট ইনপুট মান সেট করা থাকে কেবল তখনই কোনও বৈশিষ্ট্য প্রয়োগ করতে (বা সেট) করতে চান, ততটা সহজ

<my-element [conditionalAttr]="optionalValue || false">

এটি যেমন:

<my-element [conditionalAttr]="optionalValue ? optionalValue : false">

(সুতরাং optionচ্ছিক মূল্য প্রয়োগ করা হয় যদি দেওয়া হয় অন্যথায় অভিব্যক্তিটি মিথ্যা এবং বৈশিষ্ট্য প্রয়োগ করা হয় না))

উদাহরণ: আমার কেস হয়েছে, যেখানে আমি একটি রঙ প্রয়োগ করতে দিয়েছি তবে স্বেচ্ছাসেবী শৈলীতেও where

@Component({
  selector: "rb-icon",
  styleUrls: ["icon.component.scss"],
  template: "<span class="ic-{{icon}}" [style.color]="color==color" [ngStyle]="styleObj" ></span>",
})
export class IconComponent {
   @Input() icon: string;
   @Input() color: string;
   @Input() styles: string;

   private styleObj: object;
...
}

সুতরাং, "শৈলীতে রঙ" কেবল তখনই সেট করা হয়েছিল, যখন রঙের বৈশিষ্ট্যটি ছিল, অন্যথায় "স্টাইলস" স্ট্রিংয়ের রঙ বৈশিষ্ট্যটি ব্যবহার করা যেতে পারে।

অবশ্যই, এটি দিয়েও অর্জন করা যেতে পারে

[style.color]="color" 

এবং

@Input color: (string | boolean) = false;

Comments

কৌণিক.জেএস অ্যাঙ্গুলার 1, যা কৌণিক 2+ থেকে খুব আলাদা। আপনার সমাধানটি কৌণিক 2+ এর জন্য, তবে AngularJS (1) এর জন্য জিজ্ঞাসা করা হয়েছিল।

— ssc-hrep3

@ ssc-hrep3: আপনি ঠিক বলেছেন। দুঃখিত আমি মিস করেছি! ধন্যবাদ। আমি এটি উল্লেখ করার জন্য উত্তরটি সম্পাদনা করেছি। :-)

— জাফয়েড

কৌণিক নয় কৌণিক, কৌনিক 1 টি কৌনিক 1

— ডিজজির্নোজা

Answer 12

অ্যাঙ্গুলার 2 এর জন্য আপনার যদি সমাধানের দরকার হয় তবে তার নীচের মতো প্রপার্টি বাইন্ডিং ব্যবহার করুন, উদাহরণস্বরূপ আপনি ইনপুটটি কেবল শর্তযুক্তভাবেই পড়তে চান, তারপরে বর্গাকার ধনুর্বন্ধনীগুলিতে যুক্ত হন = চিহ্ন এবং অভিব্যক্তি অনুসারে অ্যাট্রিবিউট।

<input [readonly]="mode=='VIEW'"> 

Comments

কৌণিকটি হয় (কৌণিক 1) কৌনিক নয় (কৌণিক 2)

— ডিজজির্নোজা

কৌণিক 2+ এবং কৌণিক জেএস এক নয়, এগুলি সম্পূর্ণ আলাদা আলাদা পণ্যের মতো।

— সঞ্জয় সিং

Answer 13

এই কাজ পেতে সক্ষম ছিল:

ng-attr-aria-current="{{::item.isSelected==true ? 'page' : undefined}}"

এখানে দুর্দান্ত জিনিস হ'ল যদি আইটেম.আইসলেক্টডটি মিথ্যা হয় তবে বৈশিষ্ট্যটি কেবল রেন্ডার করা হয় না।