AngularJS：表與錶行NG-重複/列

我需要從對象的數組創建一個表，但我不想硬編碼表。例如，我不能做this或this。我寧願需要嵌套ng重複，如this。但是我的情況有點不同，因爲我的列中包含數組中的兩個值。數據看起來像這樣：AngularJS：表與錶行NG-重複/列

[ 
    { 
     "foo":"bar",..., 
     "key1":[ 
     "value1", 
     "value2" 
     ], 
     "key2":[ 
     "value1", 
     "value2" 
     ],..., 
     "more_foo":"more_bar" 
    },... 
]

我想從表中的行的陣列中的所有對象（其具有總是相等的結構）的值（其總是串），其中每個鍵應該是列名。就像這樣：

table, 
 
th, 
 
td { 
 
    border: 1px solid black; 
 
    text-align: center; 
 
    border-spacing: 0; 
 
} 
 

 
td, 
 
th { 
 
    padding: 0.5em; 
 
}

<table> 
 
    <thead> 
 
    <tr> 
 
     <th>foo</th> 
 
     <th colspan="2">key1</th> 
 
     <th colspan="2">key2</th> 
 
     <th>more_foo</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>bar</td> 
 
     <td>value1</td> 
 
     <td>value2</td> 
 
     <td>value1</td> 
 
     <td>value2</td> 
 
     <td>more_bar</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

以下是我想出了：如果這個值是一個數組，虛假的，如果它不是

<table> 
    <thead> 
    <tr> 
     <th ng-repeat="(propName, prop) in myArray[0]" 
      colspan="{{isUpdateable(propName) ? 2 : undefined}}"> {{propName}} 
     </th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="object in myArray | filter: searchFilter"> 
     <td ng-repeat="(propName, prop) in object" double-col>{{prop}}</td> 
    </tr> 
    </tbody> 
</table>

isUpdatable(propName)將返回true。這樣可以在此欄中有兩個td。

的雙山坳指令：

app.directive('double-col', function() { 
    return { 
     transclude: true, 
     template: "<td>{{prop[0]}}</td><td class=\"changedProp\">{{prop[1]}}</td>" 
    }; 
});

我想這個指令有兩個td小號取代現有的td當且僅當prop是一個數組，否則什麼也不做，以顯示prop（見上文td）。

因爲你在https://stackoverflow.com（人們發佈的東西不能很好地工作的地方），你可能會猜到我目前的代碼並不能很好地工作。我也是angularJS的新手，對自定義指令（也可能是大多數其他的指令）基本上沒有理解，所以如果有人能夠幫助我解決這個問題並提供解釋，那將會很好。

來源

2017-06-06 afc11hn

什麼

<tr ng-repeat="object in myArray | filter: searchFilter"> 
     <td ng-repeat="(propName, prop) in object" colspan="{{isArray(prop) ? prop.length : 1}}"> 
     <span ng-if="!isArray(prop)"> {{prop}}</span> 
     <table ng-if="isArray(prop)"><tr> 
    <td ng-repeat="prop1 in prop"> 
     {{prop1}} 
    </td> 
    </tr></table> 
     </td> 

    </tr> 

$scope.isArray=function(prop){ 
return Array.isArray(prop); 
}

Here is working fiddle

來源

2017-06-06 13:56:46 jitender

AngularJS：表與錶行NG-重複/列

回答

相關問題