web-dev-qa-db-ja.com

angularjsでObject.keysを呼び出すことができません

UI.Bootstrapアコーディオンを使用しており、見出しを次のように定義しています。

_<accordion-group ng=repeat="(cname, stations) in byClient">
    <accordion-heading>
        {{ cname }} <span class="pull-right"> {{ Object.keys(stations).length }} Stations</span>
    </accordion-heading>
_

それが表示されるとき、Object.keys(stations).lengthは何にも解決されません。同じ長さの呼び出しをコントローラーに入れた場合、予想されるカウントが返されます。 AngularJSでのメソッド呼び出しの動作を妨げる何かがありますか？

stationsを使用する残りのアコーディオンは期待どおりに動作するため、適切に設定されていることがわかります。 byClientデータ構造は基本的に次のようになります。

_{
    "Client Name" : {
        "Station Name": [
            {...},
            {...}
        ]
    }
 }
_
javascriptangularjsangular-ui-bootstrap
44
Gargoyle

はい、それはObjectがwindow/globalの一部であり、angularはスコープに対してその式を評価できないためです。バインディングでObject.keysを指定する場合angularは$scopeに対して評価を試みますが、見つかりません。rootScopeのユーティリティでobject.keysの参照を保存し、アプリ。

このようなもの：-

angular.module('yourApp',[deps...]).run(function($rootScope){
  //Just add a reference to some utility methods in rootscope.
  $rootScope.Utils = {
     keys : Object.keys
  }

  //If you want utility method to be accessed in the isolated Scope 
  //then you would add the method directly to the prototype of rootScope 
  //constructor as shown below in a rough implementation.

  //$rootScope.constructor.prototype.getKeys = Object.keys;

});

そしてこれを次のように使用します-

<span class="pull-right"> {{ Utils.keys(stations).length }} Stations</span>

これは、孤立したスコープを除くすべての子スコープで使用可能です。分離スコープでそれを行うことを計画している場合（例：-分離スコープディレクティブ）、スコープにObject.keysの参照を追加するか、長さを返すスコープでメソッドを公開する必要があります。 。

または、さらに良いことに、キー長を返すフォーマットフィルターを作成し、それをあらゆる場所で使用します。

app.filter('keylength', function(){
  return function(input){
    if(!angular.isObject(input)){
      throw Error("Usage of non-objects with keylength filter!!")
    }
    return Object.keys(input).length;
  }
});

そして、やります：-

{{ stations | keylength }}

デモ （

82
PSL

関数を使用して、オブジェクトプロパティの数を決定します。

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

そして使用：

{{ keyLength(myObj) }}
3
Alex V

filtersは、テンプレートコードの構造を処理する最もAngularJSの方法だと思います。

angular.module('app.filters').filter('objectKeysLength', [function() {
    return function(items) {
        return Object.keys(items).length;
    };
}]);

angular.module('app.filters').filter('objectKeys', [function() {
    return function(item) {
        if (!item) return null;
        var keys = Object.keys(item);
        keys.sort();
        return keys;
    };
}]);
2
jjmontes

誰かがangular 2以上のソリューションを検索する場合。これは keyvalue パイプを嫌います。これはオブジェクトの相互作用に使用できます

0
Konstantin Vahrushev