AngularJs 사전에서 ng-repeat을 사용하는 방법

AngularJs 사전에서 ng-repeat을 사용하는 방법

다음과 같은 json 객체 또는 어레이에 ng-repeat을 쉽게 사용할 수 있습니다.

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

단, 딕셔너리에 ng-module을 사용하는 방법은 다음과 같습니다.

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

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

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

가능합니까?.그렇다면 AngularJs에서는 어떻게 해야 합니까?

질문의 예: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/

또한 Angular의 새로운 기능에 대해서도 언급하고 싶습니다.JS, 즉 특수 반복 시작점과 끝점입니다.이 기능은 단일 부모 HTML 요소가 아닌 일련의 HTML 요소를 반복하기 위해 추가되었습니다.

리피터 시작점과 끝점을 사용하려면 다음을 사용하여 이들을 정의해야 합니다.ng-repeat-start그리고.ng-repeat-end명령어를 각각 참조해 주세요.

그ng-repeat-start지시는 와 매우 유사한 작용을 한다ng-repeat지시.차이점은 모든 HTML 요소(정의된 태그 포함)가 HTML 태그의 끝부분까지 반복된다는 것입니다.ng-repeat-end(태그 포함)가 배치되어 있습니다.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오브젝트를 늘로 합니다.코드에는 다음과 같이 기재되어 있기 때문에, 이것은 오타라고 생각됩니다.

// 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의 데이터 구조에서 많은 작업을 수행할 계획이라면 언더스코어.js 라이브러리는 볼만합니다.언더스코어에는 위의 작업을 수행하는 방법이 포함되어 있습니다.

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.component: (키:값 쌍의 목록을 표시합니다)

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

언급URL : https://stackoverflow.com/questions/11985863/how-to-use-ng-repeat-for-dictionaries-in-angularjs