angularjs - value - w3schools angular ng repeat




Como usar o ng-repeat para dicionários em AngularJs? (3)

Em Angular 7, o seguinte exemplo simples funcionaria (supondo que o dicionário esteja em uma variável chamada d ):

my.component.ts:

keys: string[] = [];  // declaration of class member 'keys'
// component code ...

this.keys = Object.keys(d);

my.component.html: (exibirá a lista de pares key: value)

<ul *ngFor="let key of keys">
    {{key}}: {{d[key]}}
</ul>

Eu sei que podemos facilmente usar ng-repeat para objetos json ou arrays como:

<div ng-repeat="user in users"></div>

mas como podemos usar o ng-repeat para dicionários, por exemplo:

var users = null;
users["182982"] = "{...json-object...}";
users["198784"] = "{...json-object...}";
users["119827"] = "{...json-object...}";

Eu quero usar isso com o dicionário de usuários:

<div ng-repeat="user in users"></div>

É possível?. Se sim, como posso fazer isso no AngularJs?

Exemplo para minha pergunta: Em C #, definimos dicionários como:

Dictionary<key,value> dict = new Dictionary<key,value>();

//and then we can search for values, without knowing the keys
foreach(var val in dict.Values)
{
}

Existe uma função embutida que retorna os valores de um dicionário como em c #?


Eu também gostaria de mencionar uma nova funcionalidade de AngularJS ng-repeat , ou seja, pontos de início e fim de repetição especiais. Essa funcionalidade foi adicionada para repetir uma série de elementos HTML em vez de apenas um único elemento HTML pai.

Para usar pontos de início e fim de repetidores, você deve defini-los usando as diretivas ng-repeat-start e ng-repeat-end respectivamente.

A diretiva ng-repeat-start funciona de maneira muito semelhante à diretiva ng-repeat . A diferença é que irá repetir todos os elementos HTML (incluindo a tag que está definida) até a tag HTML final onde ng-repeat-end é colocado (incluindo a tag com ng-repeat-end ).

Exemplo de código (de um controlador):

// ...
$scope.users = {};
$scope.users["182982"] = {name:"John", age: 30};
$scope.users["198784"] = {name:"Antonio", age: 32};
$scope.users["119827"] = {name:"Stephan", age: 18};
// ...

Modelo HTML de amostra:

<div ng-repeat-start="(id, user) in users">
    ==== User details ====
</div>
<div>
    <span>{{$index+1}}. </span>
    <strong>{{id}} </strong>
    <span class="name">{{user.name}} </span>
    <span class="age">({{user.age}})</span>
</div>

<div ng-if="!$first">
   <img src="/some_image.jpg" alt="some img" title="some img" />
</div>
<div ng-repeat-end>
    ======================
</div>

A saída seria semelhante à seguinte (dependendo do estilo HTML):

==== User details ====
1.  119827 Stephan (18)
======================
==== User details ====
2.  182982 John (30)
[sample image goes here]
======================
==== User details ====
3.  198784 Antonio (32)
[sample image goes here]
======================

Como você pode ver, ng-repeat-start repete todos os elementos HTML (incluindo o elemento com ng-repeat-start ). Todas as propriedades especiais ng-repeat (neste caso, $first e $index ) também funcionam conforme o esperado.








angularjs-ng-repeat