给定以下 HTML 片段，我如何创建 td 的内容取决于column 。
<div ng-app="" ng-controller="controller" >
<table>
<tr>
<th ng-repeat="column in columns">
{{ column.header }}
</th>
<tr ng-repeat="row in rows">
<td ng-repeat="column in columns">
<!-- TODO -->
</td>
</tr>
</table>
</div>
每一列可以显示不同类型的数据。例如，一个可能只显示字符串，另一个可能包含绑定(bind)到行属性的文本输入字段。
我想在列 ( column.createCell(row) ) 上调用一个函数来创建必要的 HTML，然后将结果放在 <!-- TODO --> 的位置。 .
在 WPF 中，我只需输入 ContentPresenter与 DataTemplateSelector ，但我不知道 Angular 中的等价物是什么。我读到了有关“ng-bind-html”的内容，这是要走的路吗？
最佳答案
没有给出您想要为每列构建哪种类型的自定义元素，但对于 AngularJS 中的 DOM 操作，最佳实践是将其保留在指令中。像这样的事情:
在你的html中:
<body ng-controller="MainCtrl">
<table>
<tr ng-repeat="row in rows">
<td ng-repeat="column in row">
<custom-column="column"></custom-column>
</td>
</tr>
</table>
</body>
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
// whatever you wanted to define here...
$scope.rows = ...
$scope.columns = ...
});
app.directive('customColumn', function() {
return {
scope: {
obj: '=customColumn',
},
link: function(scope, element, attrs) {
var watcher = scope.$watch('obj', function(obj) {
if (!obj) return;
// build custom element
var html = '<div>'+scope.obj.name+'</div>';
element.html(html);
// delete watch if you only need to draw once
watcher();
});
}
}
});
关于javascript - 如何动态更改表格列的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27160285/