Question

我需要使用数组垂直填充数据单元格。

这是一个简单的html表

$(npm get prefix)/bin

现有表格：

$PATH

预期产出：

<table>
<th>Name</th>
<th>Value</th>
 </table>

我需要填充数据单元格以获取价值。我已计算出它的值并存储在数组中。如何使用angularjs填充值？

Answer 1

您希望使用ngRepeat为列表中的每个元素添加新行。有关如何使用此指令的示例，请参阅docs here。

<tr ng-repeat="row in data">
<td>{{row.name}}</td>
<td>{{row.value}}</td>
</tr>

Answer 2

使用指令。看

var app = angular.module("App", []);
app.controller("AppController", function($scope) {
    $scope.data = [1, 2, 3, 4, 5];
}).directive('indexItemTable', function($timeout) {
    return {
        link: function(scope, element, attrs) {
            var data = scope.data;
            angular.element(element).find("td").each(function(index, item){
              console.log(item)
                angular.element(this).parent().append('<td>' + data[index] + '</td>');
            });
        }
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="App" ng-controller="AppController">
    <table index-item-table>
        <thead>
            <th>Name</th>
            <th>Value</th>
        </thead>
        <tbody>
            <tr>
                <td>A</td>
            </tr>
            <tr>
                <td>B</td>
            </tr>
            <tr>
                <td>C</td>
            </tr>
            <tr>
                <td>D</td>
            </tr>
            <tr>
                <td>E</td>
            </tr>
        </tbody>
    </table>
</div>

如何在angularjs中垂直填充数据单元格

2 个答案: