AngularJsの辞書にng-repeatを使用する方法は?


285

次のような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>

出来ますか?。はいの場合、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#のような辞書から値を返す組み込み関数はありますか?


1
辞書とJSONオブジェクトの違いは何ですか?私はJavaScriptには何もないと信じています!
markmarijnissen 2014年

8
@markmarijnissen:JSONオブジェクトには、JavaScriptオブジェクトよりも厳しい構文規則があります。そして、私たちはすでにPedant's Cornerにいるので、JavaScriptには「辞書」のようなものはありません。それらを単にオブジェクトと呼びます。
ポールD.ウェイト2014年

回答:


556

使用できます

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

ngRepeatのドキュメントを参照してください。例:http : //jsfiddle.net/WRtqV/1/


53
これは私が尋ねたものではなく、まさに私が欲しかったものです。ありがとう、Artem Andreev
Vural、

1
このng-repeatでフィルターをどのように使用できますか。検索フィルターを使用している場合、私のケースでは機能しません。<input type = "text" ng-model = "searchText" /> <li ng-repeat = "(name、age)in items | filter:searchText"> {{name}}:{{age}} </と言いますli> ...
Shekhar 2013

1
@Shekharフィルター "filter"は配列でのみ機能します。機能リクエストを作成してみてください。
Artem Andreev 2013

2
Pythonとのいくつかの共通点を見るのは良い:)
robert king

4
ng-ifステートメントを使用して、辞書(オブジェクト)でもフィルター機能を取得できます。例:<li ng-repeat = "(id、obj)in items" ng-if = 'obj.sex = "female "'> {{obj.name}} {{obj.surname}} </ li> ...ここで、itemsは、いくつかのキーでインデックス付けされた人物のセットです。
giowild

27

また、AngularJSのng-repeat新機能、つまり特別な繰り返しの開始終了点についても触れておきます。この機能は、単一の親HTML要素だけでなく、一連のHTML要素を繰り返すために追加されました。

リピーターの始点と終点を使用するにはng-repeat-startng-repeat-endそれぞれディレクティブとディレクティブを使用して定義する必要があります。

このng-repeat-startディレクティブは、ディレクティブと非常によく似ていng-repeatます。違いは、すべてのHTML要素(それが定義されてng-repeat-endいるタグを含む)が、配置されている終了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)も期待どおりに機能します。


エラー:[$ compile:uterdir]終了していない属性、「ng-repeat-start」が見つかりましたが、一致する「ng-repeat-end」が見つかりませんでした
zloctb 2015

@zloctb <div ng-repeat-end>..</div>マークアップでスキップした必要があります
John Kaster

6

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が上記の答えを提供します:))


1
underscore.jsおよびこれらの有用な情報の+1。ありがとうジョニー!
Vural

0

Angular 7では、次の簡単な例が機能します(辞書がと呼ばれる変数にあると仮定しますd):

my.component.ts:

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

this.keys = Object.keys(d);

my.component.html:(key:valueペアのリストを表示します)

<ul *ngFor="let key of keys">
    {{key}}: {{d[key]}}
</ul>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.