Question

我有一个表，我正在尝试使用我在控制器中创建的作用域对象创建。

我希望标题从'rowHeader'获取值，这可以正常工作。但问题是我不希望我的单元格值来自'cellValue'属性。

在我的小提琴中，我添加了一个“Desired table”，这就是我希望结果出现在我的第一个方法中。如果可能..

如您所见，我也希望在其中一列上使用过滤器。

我想使用这种方法的原因是我可以使用复选框列表来隐藏/显示列，当然这样我可以在控制器中轻松设置我的表

<!doctype html>
<html ng-app="plunker">

<head>
 <script data-require="angular.js@*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>

<body>
<div ng:controller="MainCtrl">

<p>My table</p>
<table border="1">
        <thead style="font-weight: bold;">
            <tr>
                <th class="text-right" ng-repeat="column in columnsTest" ng-if="column.checked" ng-bind="column.rowHeader"></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in rows" border="1">
                <td ng-repeat="column in columns" ng-if="column.checked" ng-bind="row[column.cellValue]"></td>
            </tr>
        </tbody>
    </table>

<p>Visible Columns:</p>
<br />
<div class="cbxList" ng-repeat="column in columnsTest">
  <input type="checkbox" ng-model="column.checked">{{column.rowHeader}}
</div>


</div>




<script>
var app = angular.module('plunker', []);

app.filter('percentage', function () {
return function (changeFraction) {
    return (changeFraction * 100).toFixed(2) + "%";
}
});


app.controller('MainCtrl', function($scope) {
  $scope.columnsTest = [
    { checked: true, cellValue: 'ModelName', rowHeader: 'Name' },
    { checked: true, cellValue: 'value1', rowHeader: 'PL' },
    { checked: true, cellValue: 'value1 / value2 | percentage', rowHeader: '+/-' }
  ];

  $scope.rows = [
  { value1: 100, value2: 5, ModelName: "This is a cell value" },
  { value1: 15, value2: 5, ModelName: "This is a cell value2" },
  { value1: 38, value2: 2, ModelName: "This is a cell value3" }
  ];

  });
  </script>
 </body>

 </html>

Answer 1

代码中有拼写错误导致问题：

<tr ng-repeat="row in rows" border="1">
  <td ng-repeat="column in columns"
      ng-if="column.checked" ng-bind="row[column.cellValue]"></td>
</tr>

您没有名为列的范围变量，请将其更改为columnsTest。

<tr ng-repeat="row in rows" border="1">
  <td ng-repeat="column in columnsTest"
      ng-if="column.checked" ng-bind="row[column.cellValue]"></td>
</tr>

从范围对象值创建表

1 个答案: