キー値のキーの行を繰り返す方法

Question

AngularJsでjsonデータを受け取り、ng-repeatを使用してjsonデータの特定の値をテーブルに表示したいとします。

JSONデータ：

{ 
    "15":{ 
     "Unique number":"133077", 
     "Designation":"Software Engineer", 
    }, 

    "16":{ 
     "Unique number":"133079", 
     "Designation":"Senior Software Engineer", 
    }, 

    "18":{ 
     "Unique number":"143688", 
     "Designation":"Senior Software Engineer", 
    } 

} 

私はこの使用してHTMLのようなテーブルに表示する：

|ユニックノー| |

| 133077 |ソフトウェアエンジニア|

| 133079 |上級ソフトウェアエンジニア|

| 143688 |上級ソフトウェアエンジニア|

助けてください。 ありがとうございます。

Answer 1

angular.module('app',[]).controller('myCtrl', function($scope){ 
 
    $scope.members = { 
 
    "15":{ 
 
     "Unique number":"133077", 
 
     "Designation":"Software Engineer", 
 
    }, 
 

 
    "16":{ 
 
     "Unique number":"133079", 
 
     "Designation":"Senior Software Engineer", 
 
    }, 
 

 
    "18":{ 
 
     "Unique number":"143688", 
 
     "Designation":"Senior Software Engineer", 
 
    } 
 

 
}; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="app" ng-controller="myCtrl"> 
 
<table> 
 
    <thead> 
 
    <th>SI.NO</th> 
 
    <th>Unique number</th> 
 
    <th>Designation</th> 
 
    </thead> 
 
    <tbody> 
 
    <tr ng-repeat="member in members"> 
 
     <td>{{$index + 1}}</td> 
 
     <td>{{member['Unique number']}}</td> 
 
     <td>{{member.Designation}}</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
</div>

Answer 2

編集： OPは、シリアル番号を表示するための追加フィールドを追加する要件を変更しました。

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.data = {"15":{ 
 
"Unique number":"133077", "Designation":"Software Engineer", }, 
 
"16":{ 
 
"Unique number":"133079", "Designation":"Senior Software Engineer", }, 
 
"18":{ 
 
"Unique number":"143688", "Designation":"Senior Software Engineer", } 
 
}; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
<table class="table table-bordered table-striped"> 
 
    <thead> 
 
    <th>Sl. No.</th> 
 
    <th>Unique number</th> 
 
    <th>Designation</th> 
 
    </thead> 
 
    <tr ng-repeat='(key, value) in data'> 
 
    <td> 
 
     {{$index + 1}} 
 
    </td> 
 
    <td> 
 
     {{value["Unique number"]}} 
 
    </td> 
 
    <td> 
 
     {{value["Designation"]}} 
 
    </td> 
 
    </tr> 
 
</table> 
 
</div>

Answer 3

理解するための簡単な新しいコンポーネントアーキテクチャ上の私のソリューションベース：

(function() { 
 
    'use strict'; 
 

 
    // app.js 
 
    angular 
 
    .module('app', []) 
 
    .component('myApp', { 
 
     template: '<items-table items="$ctrl.items"></items-table>', 
 
     bindings: {}, 
 
     controller: function() { 
 
     this.items = { 
 
      "15": { 
 
      "Designation": "Software Engineer", 
 
      "Unique number": "133077" 
 
      }, 
 
      "16": { 
 
      "Designation": "Senior Software Engineer", 
 
      "Unique number": "133079" 
 
      }, 
 
      "18": { 
 
      "Designation": "Senior Software Engineer", 
 
      "Unique number": "143688" 
 
      } 
 
     }; 
 
     } 
 
    }); 
 

 
    const itemsTableTemplate = ` 
 
<div class="items"> 
 
    <h2>Items</h2> 
 

 
    <table> 
 
    <thead> 
 
     <tr> 
 
     <th>unique no</th> 
 
     <th>designation</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr ng-repeat="(id, item) in $ctrl.items track by id"> 
 
     <td ng-bind="item['Unique number']"></td> 
 
     <td ng-bind="item['Designation']"></td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div> 
 
`; 
 

 
    // items-table.component.js 
 
    angular 
 
    .module('app') 
 
    .component('itemsTable', { 
 
     template: itemsTableTemplate, 
 
     bindings: { 
 
     items: '<' 
 
     }, 
 
     controller: ItemsTableController, 
 
     controllerAs: '$ctrl' 
 
    }); 
 

 
    function ItemsTableController() { 
 
    // Constructor 
 
    } 
 
    
 
    angular.bootstrap(document.getElementById('app'), ['app'], { 
 
    strictDi: true 
 
    }) 
 
    
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 

 
<div id="app"> 
 
    <my-app> 
 
    Loading... 
 
    </my-app> 
 
</div>