jsonオブジェクトからのネストされたテーブル（anguarJSを使用）

Question

角度を使用してjsonオブジェクトを表示しようとしています。オブジェクトはネストされたオブジェクトを持っているかもしれないし、そうでないかもしれないので、私は実行時に評価する必要があります。 各キー（k、v）の ： vがオブジェクトの場合：各（k2、v2）に対して、HTML_TD内に別のネストしたテーブルを追加します。そうでない場合、HTML_TDの値を出力する必要があります。

ネストされたオブジェクトが機能します。 問題は：vがオブジェクトの場合、式が ''と評価され、何も印刷されない（内部ループk2、v2に移動するため）が、代わりに、vがオブジェクトであっても、HTML_TD

コード：

<table border="1"> 
<tr ng-repeat="(k,v) in json.properties"> 
    <td> {{ k }} </td> 
    <td> {{ typeof (v) == 'object' ? '' : v }} </td> 
    <td> 
     <table> 
      <tr ng-repeat="(k2,v2) in v"> 
       <td> {{ k2 }} </td> 
       <td> {{ v2 }} </td> 
      </tr> 
     </table> 
    </td> 
</tr> 

Answer 1

typeof機能がangularjsテンプレート補間に定義されていないが、テンプレートの構文は、JavaScriptの機能の面で少し限られていますが、そのようなあなたのスコープでそれを宣言することができます：

$scope.typeof = function(obj) { 
    return typeof(obj); 
}; 

typeofという名前の関数がスコープに表示され、スニペットが機能するようになります。このソリューションを実装する簡単な例は、蛇のスニペットです。

angular.module('myApp', []) 
 
    .controller('myController', function($scope) { 
 

 
    $scope.json = { 
 
     properties: { 
 
     a: 'A', 
 
     b: 'B', 
 
     c: { 
 
      a1: 'A1' 
 
     } 
 
     } 
 
    }; 
 

 
    $scope.typeof = function(obj) { 
 
     return typeof(obj); 
 
    }; 
 

 
    }); 
 

 
angular.element(document).ready(function() { 
 
    angular.bootstrap(document, ['myApp']); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> 
 
<div ng-controller="myController"> 
 
    <table border="1"> 
 
    <tr ng-repeat="(k,v) in json.properties"> 
 
     <td>{{ k }}</td> 
 
     <td>{{ typeof(v) == 'object' ? '' : v }}</td> 
 
     <td> 
 
     <table border="1"> 
 
      <tr ng-repeat="(k2,v2) in v"> 
 
      <td>{{ k2 }}</td> 
 
      <td>{{ v2 }}</td> 
 
      </tr> 
 
     </table> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 2

私は角パーサがテンプレートにtypeof機能を許可していないと思います。 しかし、コントローラーで1つのメソッドを定義してtypeofを得ることができます。 例えば：

$scope.getTypeof = function(value) { 
     return typeof value; 
}; 

今すぐテンプレートコードでこのメソッドを呼び出します。

{{ getTypeof(v) === 'object' ? '' : v }}