Question

如何在AngularJs和Bootstrap中加载带有符号或图标的表格？我有一个表使用ng-repeat来加载一个矩阵，其中包含0,1或2作为值。所以我希望表格不显示零，而不是1显示红色圆圈而不是2个黄色圆圈。

这是我的表：

<div class="vertical-center">
        <table class="table table-bordered">
            <tr ng-repeat="row in data">
                <td ng-repeat="cell in row track by $index" ng-click="selectPosition($index)">
                    {{cell}}
                </td>
            </tr>
        </table>
</div>

Answer 1

app.controller('MainCtrl', ['$scope', '$sce', function($scope, $sce) {
  $scope.data = [
    [0, 0, 2],
    [1, 1, 0],
    [0, 2, 2]
  ];
  $scope.symbols = [
    '',
    '<div class="circle red"></div>',
    '<div class="circle yellow"></div>'
  ].map($sce.trustAsHtml);
}]);

HTML：

<div class="vertical-center">
    <table class="table table-bordered">
        <tr ng-repeat="row in data">
            <td ng-repeat="cell in row track by $index" 
                ng-bind-html="symbols[cell]" 
                ng-click="selectPosition($index)">
            </td>
        </tr>
    </table>
</div>

plunker：http://plnkr.co/edit/nhxYPj3JpwcOWLDS4e0y?p=preview

如何在AngularJS中加载带符号的表

1 个答案: