Làm cách nào để thiết lập thuộc tính id của phần tử HTML một cách linh hoạt với angularjs (1.x)?

Được cung cấp một phần tử HTML loại div, làm thế nào để đặt giá trị của idthuộc tính của nó , đó là nối của biến phạm vi và chuỗi?

ngAttr Chỉ thị hoàn toàn có thể giúp đỡ ở đây, như được giới thiệu trong tài liệu chính thức

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

Chẳng hạn, để đặt idgiá trị thuộc tính của một divphần tử, để nó chứa chỉ mục, một đoạn xem có thể chứa

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

mà sẽ được nội suy để

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

Điều này làm việc cho tôi khá tốt:

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

Trong trường hợp bạn đến câu hỏi này nhưng liên quan đến phiên bản Angular mới hơn > = 2.0 .

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

Một cách thanh lịch hơn tôi tìm thấy để đạt được hành vi này chỉ đơn giản là:

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

Để thực hiện, tôi muốn mỗi phần tử đầu vào lặp lại cho mỗi phần tử có một id duy nhất để liên kết nhãn. Vì vậy, đối với một loạt các đối tượng có trong myScopeObjects, người ta có thể làm điều này:

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

Có thể tạo id duy nhất một cách nhanh chóng có thể khá hữu ích khi tự động thêm nội dung như thế này.

Bạn chỉ có thể làm như sau

Trong js của bạn

$scope.id = 0;

Trong mẫu của bạn

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

cái nào sẽ kết xuất

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

Không cần thiết phải nối bên trong dấu ngoặc kép.

Chỉ <input id="field_name_{{$index}}" />

Nếu bạn sử dụng cú pháp này:

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

Angular sẽ kết xuất một cái gì đó như:

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

Tuy nhiên cú pháp này:

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

sẽ tạo ra một cái gì đó như:

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