ngN00b: loop $ index AngularJS

Decidi começar uma série de protips focalizando aqueles que estão apenas começando angular.js; Vou chamá-lo de ngN00b.

Se você estiver interessado, todos os itens da série serão marcados com ngN00b.

Às vezes, é útil saber o índice de um item enquanto você faz o loop com a ngRepeatdiretiva.

Digamos que você tenha um método definido em seu controlador que removerá o item de uma lista, a maneira mais fácil de fazer isso (em um array, pelo menos) é conhecer o índice e removê splice-lo.

Você sabia

A ngRepeatdiretiva passa uma variável secreta para cada item do loop. Esta variável é $index.

Cada item dentro do ngRepeat é seu próprio escopo

Cada item no ngRepeatloop é basicamente sua própria diretiva, com seu próprio escopo, e $indexé uma variável dentro desse escopo! Esses magos complicados!

Aguenta ou fica quieto!

Pegue esta matriz

$scope.arrayItems = ['Item 1', 'Item 2', 'Item 3'];

E faça um loop em uma lista

<ul class="list">
    <li ng-repeat="item in arrayItems">{{ $index }} - {{ item }}</li>
</ul>

Quando imprimir {{ $index }}vamos obter o índice do item no circuito ( 0, 1, 2respectivamente).

$ index está disponível independentemente do tipo de loop. Ele vem com matrizes e objetos.

Isso também funciona com hashes (ou objetos javascript).

$scope.objectItems = {
  'first' : 'Item 1',
  'second' : 'Item 2',
   'third' : 'Item 3'
}

<ul class="list">
    <li ng-repeat="item in objectItems">{{ $index }} - {{ item }}</li>
</ul>

A saída deste loop seria idêntica à primeira.

Outro segredo

Na verdade, nada disso é segredo, mas devido à natureza mutante do projeto, pode ser difícil filtrar alguns desses recursos básicos quando o mundo está explodindo em torno de Diretivas e Serviços .

(key, val)

Se você estiver fazendo um loop por um objeto, $indexnão fornecerá a chave do objeto, mas sim o índice numerado (como um array).

Se precisar acessar a chave, você pode simplesmente configurar seu ngRepeatloop da seguinte forma:

<ul class="list">
    <li ng-repeat="(key, val) in objectItems">{{ $index }} - {{ key }} = {{ val }}</li>
</ul>

Sua saída seria mais ou menos assim:

• 0 – primeiro = Item 1
• 1 – segundo = Item 2
• 2 – terceiro = Item 3

Não acredite apenas na minha palavra!

Aqui está um violino como prova!