web-dev-qa-db-ja.com

AngularJの辞書にng-repeatを使用する方法

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＃のように辞書から値を返す組み込み関数はありますか？

angularjsjsondictionaryangularjs-ng-repeat
282
Vural Acar

あなたが使用することができます

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

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

551
Artem Andreev

AngularJS ng-repeat の新しい機能、つまり特別な繰り返しstartとエンドポイント。その機能は、単一の親HTML要素の代わりに一連ののHTML要素を繰り返すために追加されました。

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

ng-repeat-startディレクティブは、ng-repeatディレクティブと非常によく似た働きをします。違いは、allng-repeat-endが配置されている最後のHTMLタグまで（ng-repeat-endのタグを含む）HTML要素まで繰り返されることです。 。

サンプルコード（コントローラから）：

// ...
$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）も期待通りに動作します。

27
Tom

JavaScript開発者は、上記のデータ構造をDictionaryではなくオブジェクトまたはハッシュとして参照する傾向があります。

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

6
JonnyReeves

Angular 7では、次の簡単な例がうまくいきます（dictionaryが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>
0
Ron Kalian