কীভাবে একটি কৌণিকভাবে কোনও HTML উপাদানটির আইডি বৈশিষ্ট্যটি সেট করতে হবে?


265

প্রকারের একটি এইচটিএমএল উপাদান সরবরাহ করেছেন div, কীভাবে এর idবৈশিষ্ট্যের মান সেট করবেন , যা স্কোপ ভেরিয়েবল এবং স্ট্রিংয়ের সংমিশ্রণ?

উত্তর:


392

ngAttr অফিসিয়াল ডকুমেন্টেশনে যেমন নির্দেশনা দেওয়া হয়েছিল তেমন দিকনির্দেশনা সম্পূর্ণরূপে এখানে সহায়ক হতে পারে

https://docs.angularjs.org/guide/interpolation#-ngattr-for-binding-to-arbitrary-attributes

উদাহরণস্বরূপ, idকোনও divউপাদানের বৈশিষ্ট্যের মান সেট করতে , যাতে এটিতে একটি সূচক থাকে, একটি ভিউ খণ্ডে থাকতে পারে

<div ng-attr-id="{{ 'object-' + myScopeObject.index }}"></div>

যার সাথে বিভক্ত হয়ে যাবে

<div id="object-1"></div>

1
কোথা myScopeObjectথেকে আসে? আমি কোথায় এটি সংজ্ঞায়িত করব?
জান আগারার্ড

1
@ জনআগার্ড ধরে নেওয়া যাক একটি নিয়ামক ব্যবহার করে প্রকাশিত myScopeObjectকোনও সামগ্রীর সম্পত্তি scope। দয়া করে ডকস.আঙ্গুলারজেএস.আর.গাইড / কন্ট্রোলারও দেখুন । এটি কি আপনার পক্ষে যথেষ্ট পরিষ্কার বা আমি আরও বিশদভাবে বর্ণনা করব?
থিয়েরি মেরিয়েন

আমি এনজি-অ্যাট্রি-আইডি = "{{'প্যানেল' + ফাইলটি করেছি I d}" যোগ করুন তবে এটি আমার জন্য আইডি = "প্যানেল 12312" জেনারেট করে না :(
ম্যানুয়েল মায়েস্ত্রিণী

17
নিম্নলিখিত দুটি আচরণে অভিন্ন নয়: <div id="{{ 'object' + index }}">এবং <div ng-attr-id="{{ 'object' + index }}">? দস্তাবেজগুলি মনে হয় প্রিপেন্ডিং ng-attr-হ'ল ক্ষেত্রে এমন উপাদানগুলির জন্য সহায়তা করা যেখানে উপাদানটি মানহীন কিছু, যেমন একটি নয় <div>। আমি কি ডক্সটি ঠিকঠাক পড়ছি?
broc.seib

3
@ broc.seib এনডি-অ্যাটর ব্যবহার করে কেবল স্ট্যান্ডার্ড সম্পর্কে নয়। এটি ভাল অনুশীলন কারণ এইচটিএমএল ইন্টারপ্রেটার কৌণিক বোঝা লোড হওয়ার আগে উপাদানটিকে আইডি নির্ধারণ করতে পারে। এবং এনজি-অ্যাটর কেবলমাত্র কৌনিক লোড হয়ে গেলে উপাদানটিকে আইডি নির্ধারণের বিষয়টি নিশ্চিত করে। <img> ট্যাগে এনজি-এসসিআর ক্ষেত্রে একই।
অ্যালেক্স

70

এই জিনিসটি আমার জন্য বেশ ভালভাবে কাজ করেছে:

<div id="{{ 'object-' + $index }}"></div>


সময় উড়ে যায় এবং সম্ভবত, সবচেয়ে স্বজ্ঞাত সিন্ট্যাক্স এখন কেবল প্রত্যাশা অনুযায়ী কাজ করে works আমি মনে করি একটি তালিকা নিয়ে পুনরাবৃত্তি করার সময় কিছু সমস্যা ছিল।
থিয়েরি মেরিয়েন

2
এটি 90% ক্ষেত্রে সঠিকভাবে কাজ করবে তবে আপনি কখনও কখনও ত্রুটিগুলি পেতে পারেন যা ডিবাগ করা শক্ত। পরিবর্তে আপনার এনজি-অ্যাটর-আইডি ব্যবহার করা উচিত।
বাকী

ng-attr-id0% পরিস্থিতিতে সুবিধাজনক। কোনও উদাহরণ সরবরাহ করা যায় না, কারণ কোনওটি নেই।
48-

5
ng-attr-idপদ্ধতি তা নিশ্চিত করার জন্য কাঁচা NG অভিব্যক্তি (যেমন একটি বৈধ এইচটিএমএল অ্যাট্রিবিউট মধ্যে অনুষ্ঠিত কখনো হয় id, labelইত্যাদি)। এনজি 'জাঙ্ক' (যেমন রেন্ডার সম্পূর্ণ হওয়ার আগে, বা
জেএসএস

34

আপনি যদি এই প্রশ্নে এসেছিলেন তবে নতুন কৌণিক সংস্করণ> = 2.0 এর সাথে সম্পর্কিত ।

<div [id]="element.id"></div>

2
এটি কার্যকর নয়, প্রশ্নটি AngularJS
বিটিকে

8
আমি রাজী; এটি কেবল সেই সদস্যদেরই কার্যকর হবে যা এটি দরকারী বলে মনে করে।
SoEzPz

16
কিছু সদস্য এখনও কৌনিক লিঙ্কগুলি সন্ধান করা সত্ত্বেও Angularjs লিঙ্কগুলিতে ক্লিক করে। এটি কিছুটা বিভ্রান্তিকর এবং ত্রুটিগুলি ঘটতে থাকবে।
SoEzPz

24

এই আচরণটি অর্জন করার জন্য আমি আরও মার্জিত উপায়টি হ'ল সহজভাবে:

<div id="{{ 'object-' + myScopeObject.index }}"></div>

আমার বাস্তবায়নের জন্য আমি প্রতিটি এনজি-রিপিটে প্রতিটি ইনপুট উপাদানটির সাথে লেবেলটি সংযুক্ত করার জন্য একটি অনন্য আইডি চেয়েছিলাম। সুতরাং মাইস্কোপঅবজেক্টসের অভ্যন্তরে থাকা সামগ্রীর অ্যারেগুলির জন্য কেউ এটি করতে পারে:

<div ng-repeat="object in myScopeObject">
    <input id="{{object.name + 'Checkbox'}}" type="checkbox">
    <label for="{{object.name + 'Checkbox'}}">{{object.name}}</label>
</div>

গতিশীলভাবে এই জাতীয় সামগ্রী যুক্ত করার সময় ফ্লাইতে অনন্য আইডি তৈরি করতে সক্ষম হওয়া বেশ কার্যকর হতে পারে।


আমি মনে করি এই পদ্ধতির সমস্যা রয়েছে। পৃষ্ঠাটি লোড হওয়ার পরে আমি কৌণিক বাঁধাইয়ের সূচনা করছি। এখন মাঝে মাঝে ডিভটি সঠিকভাবে লোড করতে ব্যর্থ হয় যা আমার ধারণা বিভিন্ন ডিভের আইডি সংঘর্ষের কারণে।
সুমিত

মজাদার. যদি আপনি কোনও আচরণকে কোনও নিমন্ত্রণকর উদাহরণে পুনরুত্পাদন করতে পারতেন তবে আমি এটি পরীক্ষা করে খুশি হব। 'এনজি-অ্যাট্রি-আইডি =' ব্যবহার করে এবং কেবল 'আইডি =' ব্যবহার করে না?
কামুলো নিম্বাস

9

আপনি কেবল নিম্নলিখিতটি করতে পারেন

আপনার জেএসে

$scope.id = 0;

আপনার টেম্পলেট

<div id="number-{{$scope.id}}"></div>

যা রেন্ডার হবে

<div id="number-0"></div>

ডাবল কোঁকড়া বন্ধনী ভিতরে concক্যবদ্ধ করা প্রয়োজন হয় না।


2

মাত্র <input id="field_name_{{$index}}" />


কেন একটি index সূচকের সামনে?
পাইপো

আমি মনে করি এটি সম্ভবত একটি এনজি-রিপিট হওয়ার কথা বলে?
gian1200

ঠিক @ পিপো আপনার অবশ্যই ডকস.আঙ্গুলারজেএস.আর.পি.আই.পি / ইং / ডাইরেক্টিভ / এং রিপিট :) পরীক্ষা করে দেখতে পারেন
ডি মোহাম্মদ

0

আপনি যদি এই সিনট্যাক্সটি ব্যবহার করেন:

<div ng-attr-id="{{ 'object-' + myScopeObject.index }}"></div>

কৌণিক এমন কিছু রেন্ডার করবে:

 <div ng-id="object-1"></div>

তবে এই বাক্য গঠন:

<div id="{{ 'object-' + $index }}"></div>

এর মতো কিছু তৈরি করবে:

<div id="object-1"></div>

6
আপনি কী বলতে চাইছেন তা ব্যাখ্যা করুন?
কুমার

6
কেন ng-attr-idতৈরি করা উচিত ng-id..? ওইটা ভুল. আমি ভাবছি কে এটিকে সমর্থন করে
টিজে
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.