[angularjs] AngularJ에서 사전에 ng-repeat를 사용하는 방법은 무엇입니까?

Program / 글쓴이

json 객체 또는 배열에 ng-repeat 를 쉽게 사용할 수 있다는 것을 알고 있습니다 .

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

그러나 사전에 ng-repeat를 어떻게 사용할 수 있습니까?

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

사용자 사전과 함께 사용하고 싶습니다.

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

가능합니까?. 그렇다면 AngularJ에서 어떻게 할 수 있습니까?

내 질문의 예 : C #에서는 다음과 같은 사전을 정의합니다.

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)
{
}

C #과 같은 사전에서 값을 반환하는 내장 함수가 있습니까?

답변

당신이 사용할 수있는

<li ng-repeat="(name, age) in items">{{name}}: {{age}}</li>

ngRepeat 설명서를 참조하십시오 . 예 : http://jsfiddle.net/WRtqV/1/

답변

또한 AngularJSng-repeat 의 새로운 기능 , 즉 특수 반복 시작 및 종료 지점에 대해서도 언급하고 싶습니다 . 이 기능은 단일 상위 HTML 요소 대신 일련 의 HTML 요소 를 반복하기 위해 추가되었습니다 .

리피터 시작점과 종료점을 사용하려면 ng-repeat-start및 ng-repeat-end지시문을 각각 사용하여 정의해야합니다 .

ng-repeat-start지시어는 매우 유사 작동 ng-repeat지시어. 차이점은 모든 HTML 요소 (정의 된 태그 포함)를 ng-repeat-end배치 할 끝 HTML 태그 (로 태그 포함 )까지 모든 HTML 요소를 반복한다는 것입니다 ng-repeat-end.

컨트롤러의 샘플 코드 : 

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

샘플 HTML 템플릿 : 

<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>

출력은 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]
======================

보시다시피, ng-repeat-start모든 HTML 요소 (요소 포함)를 반복합니다 ng-repeat-start. 모든 ng-repeat특수 속성 (이 경우 $first및 $index)도 예상대로 작동합니다.

답변

JavaScript 개발자는 위의 데이터 구조를 사전 대신 객체 또는 해시로 참조하는 경향이 있습니다.

users객체를 null로 초기화 할 때 위의 구문이 잘못되었습니다 . 코드가 읽어야 할 오타라고 생각합니다.

// Initialize users as a new hash.
var users = {};
users["182982"] = "...";

해시에서 모든 값을 검색하려면 for 루프를 사용하여 해시를 반복해야합니다.

function getValues (hash) {
    var values = [];
    for (var key in hash) {

        // Ensure that the `key` is actually a member of the hash and not
        // a member of the `prototype`.
        // see: http://javascript.crockford.com/code.html#for%20statement
        if (hash.hasOwnProperty(key)) {
            values.push(key);
        }
    }
    return values;
};

JavaScript에서 데이터 구조로 많은 작업을 수행하려는 경우 underscore.js 라이브러리를 살펴볼 가치가 있습니다. 밑줄에는 위의 작업을 수행 하는 values방법 이 있습니다.

var values = _.values(users);

나는 Angular를 직접 사용하지 않지만 해시 값을 반복하기위한 편리한 메소드 빌드가있을 것이라고 확신합니다 (아, 거기에 있습니다, Artem Andreev는 위의 답변을 제공합니다 :)).

답변

Angular 7에서는 다음과 같은 간단한 예제가 작동합니다 (사전이이라는 변수에 있다고 가정 d).

my.component.ts :

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

this.keys = Object.keys(d);

my.component.html : (키 : 값 쌍의 목록을 표시합니다)

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

답변