ng-repeatを使用して配列内の各要素のキー名を変更する方法

私はng-repeatで表に示しているオブジェクトの配列を持っています。ng-repeatを使用して配列内の各要素のキー名を変更する方法

<table> 
    <thead> 
     <tr> 
      <th ng-repeat="col in columnHeaders">{{col}}</th> //['Name', 'Bank Name','Code', 'Type','Status']; 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="row in data track by $index"> 
      <td ng-repeat="col in columnRows">{{row[col]}}</td> //['name', 'bankName','code', 'type','isActive']; 
     </tr> 
    </tbody> 
</table>

私も<th></th>でng-repeatと<td></td>を使用しています。しかし私のcolumnHeaders名前と行property(columnRows)の名前は異なります。を<td></td>タグに使用しているときに、プロパティ名を列ヘッダー名と同じに変更したいとします。私は、別名 'as'を使用すると考えられていますが、各要素に対してどのように使用するかはわかりません。誰でも助けてくれますか？

出典

2017-11-22 shreya gupta

私はあなたが達成したいことを理解していません。詳しく教えてください。 –

ng-repeatをcolumnRows配列に使用している間、各要素の値をcolumnHeaders配列と同じに変更したいと考えています。例： - 名前 - >名前、銀行名 - >銀行名など。 –

このテンプレートは**オブジェクトの内容を表示する**に使用されます。その役割は、オブジェクトに含まれる内容を変更することではありません。 JavaScriptコードはそれを行う必要があります。しかし、私はあなたのオブジェクトの完全な有効キーを変更し、命名規則を遵守し、慣習を尊重し、命名規則を尊重せずにキーを使いにくくすることが望ましい理由を理解するのは難しいです。 –

代わりに2 columnRowsとヘッダー行（文字列の配列）を使用する、keyHash（列データキーとヘッダ列）の単一のアレイを作る

check running fiddle for this

とコードのようなもの： -

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

<body ng-app="myApp" ng-controller="myCtrl"> 

<table> 
    <thead> 
     <tr> 
      <th ng-repeat="col in columnRows">{{col.displayStr}}</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="row in data track by $index"> 
      <td ng-repeat="col in columnRows">{{row[col.key]}}</td> 
     </tr> 
    </tbody> 
</table> 

<script> 
var app = angular.module("myApp", []); 
app.controller("myCtrl", function($scope) { 


$scope.columnRows = [ 
{key:'name',displayStr:'Name'}, 
    {key:'bankName',displayStr:'Bank Name'}, 
    {key:'code',displayStr:'Code'}, 
    {key:'type',displayStr:'Type'}, 
    {key:'isActive',displayStr:'Status'} 
] 

    $scope.data = [ 
    { 
    name:'James', 
    bankName:'RBL', 
    code:'1234', 
    type:'Saving', 
    isActive:true 
    }, 
    { 
    name:'Riyan', 
    bankName:'DSB', 
    code:'1234', 
    type:'Current', 
    isActive:true 
    } 
    ]; 

}); 
</script> 

</body> 
</html>

出典

2017-11-22 20:19:38

ng-repeatを使用して配列内の各要素のキー名を変更する方法

答えて

関連する問題