AngularJS式の1つのキーを持つオブジェクトからキー/値を読み取る

Question

AngularJS式で1つのキーのみを持つオブジェクトからキー/値を読み取る便利な方法はありますか？以下は例です。

<div ng-app="app" ng-controller="ctrl"> 
    <span>{{me.key}}</span> //I want: <span>name</span> 
    <span>{{me.value}}</span> //I want: <span>Ealon</span> 
</div> 

angular.module("app", []) 
    .controller("ctrl", function($scope) { 
     $scope.me = { 
      "name": "Ealon" //This object contains only one key 
     }; 
    }) 

ng-repeatを使用してキーと値のペアを表示する方法があります。しかし残念ながら、何らかの理由でng-repeatをここで使用することはできません。私は便利ではないと思い

別の解決策は、次のとおりです。

<div ng-app="app" ng-controller="ctrl"> 
    <span>{{meCopy.key}}</span> 
    <span>{{meCopy.value}}</span> 
</div> 

angular.module("app", []) 
    .controller("ctrl", function($scope) { 
     $scope.me = { 
      "name": "Ealon" 
     }; 

     var meKey = Object.getOwnPropertyNames($scope.me)[0]; 
     var meValue = $scope.me[meKey]; 

     $scope.meCopy = { 
      "key": meKey, 
      "value": meValue 
     }; 
    }) 

これを行うには、任意の簡単な方法はありますか？ご協力いただきありがとうございます！

Answer 1

ないあなたがng-repeatを使用できない理由を確認しますが、代替オプションは、例えば、あなたのオブジェクトの最初のプロパティで取得するためにObject.keysを使用することになります。

<div ng-app="app" ng-controller="ctrl"> 
    <span>{{getFirstPropertyKey(me)}}</span> 
    <span>{{getFirstPropertyValue(me)}}</span> 
</div> 

angular.module("app", []) 
    .controller("ctrl", function($scope) { 
     $scope.me = { 
      "name": "Ealon" //This object only contains one key 
     }; 

     $scope.getFirstPropertyKey = function(obj){ 
     return Object.keys(obj)[0]; 
     } 

     $scope.getFirstPropertyValue = function(obj){ 
     return obj[Object.keys(obj)[0]]; 
     } 
    }); 

Answer 2

しかし残念ながら、私はng-repeatを使用することはできませんここ何らかの理由で。

おそらくあなたはng-controllerディレクティブと同じ要素にng-repeatディレクティブを入れてみました。両方のディレクティブはスコープを作成し、お互いに戦います。

ng-repeatディレクティブは、ng-controllerディレクティブとは別の要素にある必要があります。

<div ng-app="app" ng-controller="ctrl"> 
    <div ng-repeat="(key, value) in me"> 
     <span>{{key}}</span> 
     <span>{{value}}</span> 
    </div> 
</div> 

異なる要素の2つのディレクティブを配置することにより、ng-repeatによって作成されたスコープが適切にng-controllerディレクティブで作成された範囲から継承します。

DEMO on JSFiddle