วิธีการตั้งค่าแอตทริบิวต์ id ขององค์ประกอบ HTML แบบไดนามิกด้วย angularjs (1.x)?

ให้องค์ประกอบ HTML ประเภทdivวิธีการตั้งค่าของidคุณลักษณะซึ่งเป็นการเชื่อมต่อของตัวแปรขอบเขตและสตริง?

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>

สิ่งนี้ทำงานได้ดีสำหรับฉัน:

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

ในกรณีที่คุณมาถึงคำถามนี้ แต่ที่เกี่ยวข้องกับการใหม่รุ่นเชิงมุม> = 2.0

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

วิธีที่สวยงามกว่าที่ฉันพบเพื่อให้บรรลุพฤติกรรมนี้คือ:

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

สำหรับการนำไปใช้ของฉันฉันต้องการให้แต่ละองค์ประกอบอินพุตใน ng-repeat กับแต่ละรายการมีรหัสเฉพาะเพื่อเชื่อมโยงป้ายกำกับ ดังนั้นสำหรับอาร์เรย์ของวัตถุที่อยู่ใน myScopeObjects เราสามารถทำได้:

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

ความสามารถในการสร้างรหัสที่ไม่ซ้ำกันในทันทีนั้นมีประโยชน์มากเมื่อเพิ่มเนื้อหาเช่นนี้แบบไดนามิก

คุณสามารถทำสิ่งต่อไปนี้ได้

ใน js ของคุณ

$scope.id = 0;

ในเทมเพลตของคุณ

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

ซึ่งจะทำให้

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

ไม่จำเป็นต้องต่อกันภายในวงเล็บปีกกาคู่

แค่ <input id="field_name_{{$index}}" />

หากคุณใช้ไวยากรณ์นี้:

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

เชิงมุมจะทำให้บางสิ่งเช่น:

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

อย่างไรก็ตามไวยากรณ์นี้:

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

จะสร้างสิ่งที่ชอบ:

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