web-dev-qa-db-ja.com

AngularJSテンプレートのオブジェクトサイズをチェックして、間違っていますか？

AngularJSテンプレートでmyObjectを反復処理したい

これは機能しません：

<ul ng-if="Object.keys(myObject).length">
    <li ng-repeat="(key, val) in myObject">
        Value at key {{ key }} is: {{ val }}
    </li>
</ul>

何も表示されません。$scope.Objectが定義されていないためと思います。

代わりに、私はこれを行いました：

コントローラ/ディレクティブで：

$scope.sizeOf = function(obj) {
    return Object.keys(obj).length;
};

テンプレート：

<ul ng-if="sizeOf(myObject)">
    <li ng-repeat="(key, val) in myObject">
        Value at key {{ key }} is: {{ val }}
    </li>
</ul>

すべての単一コントローラーまたはディレクティブ$scopeでこの関数が重複しているため、このソリューションは好きではありません。

よりクリーンな解決策はありますか？

よろしくお願いします！

javascriptangularjsobjectangularjs-scope
15
Pandaiolo

どこでもObjectディレクティブでngIfを使用できます。ルートスコープへの参照を置くだけです。

app.run(function($rootScope) {
    $rootScope.Object = Object;
});

ディレクティブなどの分離されたスコープでも使用できます。

[〜＃〜] upd [〜＃〜]。 Angularの最近のバージョンでは、式でObjectを参照できなくなりました。この場合、メソッドを個別に参照する必要があります。

app.run(function($rootScope) {
    $rootScope.keys = Object.keys;
});

次に、この関数を使用します。

ng-if="keys(myObject).length"
26
dfsq

コントローラで、この行を追加します

$scope.Object = Object;

その後、あなたがしたようにあなたのテンプレートでObject.XXXを使用することができるはずです。

9
zs2020

これで十分ではないでしょうか？

<ul ng-if="myObject">
  <li ng-repeat="(key, val) in myObject">
      Value at key {{ key }} is: {{ val }}
  </li>
</ul>

このディレクティブは、nullの未定義の空のオブジェクトを処理します。 Plunkr デモ用。オブジェクトを未定義、nullに変更するか、値を入力してください。

6
dmahapatro