Como definir o atributo id de um elemento HTML dinamicamente com angularjs (1.x)?


Respostas:


392

ngAttr diretiva pode ser totalmente útil aqui, conforme introduzido na documentação oficial

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

Por exemplo, para definir o idvalor do atributo de um divelemento, para que ele contenha um índice, um fragmento de visualização pode conter

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

que seria interpolado para

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

1
De onde myScopeObjectvem? Onde eu definiria isso?
Jan Aagaard

1
@JanAagaard Vamos supor que myScopeObjectseja uma propriedade de um scopeobjeto exposto usando um controlador. Consulte também docs.angularjs.org/guide/controller . Está claro o suficiente para você ou devo elaborar mais?
Thierry Marianne

eu fiz ng-attr-id = "{{'Painel' + arquivo.Id}}", mas não gera id = "Panel12312" para mim :(
Manuel Maestrini

17
Os dois seguintes não são idênticos em comportamento: <div id="{{ 'object' + index }}">e <div ng-attr-id="{{ 'object' + index }}">? Os documentos parecem dizer que o precedente ng-attr-é ajudar nos casos em que o elemento é algo fora do padrão, como não a <div>. Estou lendo os documentos, certo?
Broc.seib

3
@ broc.seib usando nd-attr não é apenas padrão. Essa é uma boa prática, pois o intérprete HTML pode atribuir um ID ao elemento antes que o angular seja carregado. E ng-attr garante atribuir id ao elemento apenas quando o angular é carregado. o mesmo ocorre com ng-src na tag <img>.
Alex

70

Essa coisa funcionou muito bem para mim:

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


O tempo voa e, talvez, a sintaxe mais intuitiva agora funcione conforme o esperado. Lembro-me de ter alguns problemas ao percorrer uma lista.
Thierry Marianne

2
Isso funcionará corretamente em 90% dos casos, mas às vezes você pode receber erros difíceis de depurar. Você deve usar ng-attr-id.
Baki

ng-attr-idé vantajoso em 0% das situações. Nenhum exemplo pode ser fornecido, porque não há nenhum.
omikes

5
O ng-attr-idmétodo é o de assegurar que a expressão ng bruto nunca é processado em um atributo válido HTML (por exemplo id, label, etc.). Esta é parar qualquer uso jusante lendo NG 'junk' (por exemplo, antes de tornar está completa, ou depois de um acidente js)
sobrevoou

35

Caso você tenha chegado a essa pergunta, mas esteja relacionado à versão Angular mais recente> = 2.0 .

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

2
Isso não é útil, a questão está em contexto de AngularJS
btk

8
Concordo; só será útil para os membros que acharem útil.
SoEzPz

16
Alguns membros ainda clicam nos links Angularjs, embora estejam procurando por links Angular. É um pouco confuso e os erros continuarão a acontecer.
SoEzPz

24

Uma maneira mais elegante que encontrei para atingir esse comportamento é simplesmente:

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

Para minha implementação, eu queria que cada elemento de entrada em um ng-repeat para cada um tivesse um ID exclusivo para associar o rótulo. Portanto, para uma matriz de objetos contidos no myScopeObjects, é possível fazer o seguinte:

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

Ser capaz de gerar IDs únicos em tempo real pode ser bastante útil ao adicionar dinamicamente conteúdo como este.


Eu acho que essa abordagem tem problemas. Estou inicializando a ligação angular após o carregamento da página. Agora, às vezes, o div falha ao carregar corretamente, o que eu acho que é por causa do choque de id de div diferente.
Sumeet

Interessante. Se você pudesse reproduzir seu comportamento em um exemplo mais ousado, ficaria feliz em dar uma olhada. Usar 'ng-attr-id =' funciona e apenas usar 'id =' não?
Cumulo Nimbus

9

Você poderia simplesmente fazer o seguinte

Em seus js

$scope.id = 0;

No seu modelo

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

o que renderizará

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

Não é necessário concatenar dentro de colchetes duplos.



0

Se você usar esta sintaxe:

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

Angular renderizará algo como:

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

No entanto, esta sintaxe:

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

irá gerar algo como:

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

6
Explique o que você está tentando dizer?
Kumar

6
Por que ng-attr-idcriar ng-id..? isto é errado. Eu quero saber quem upvotes isso
TJ
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.