CODEWITHSUNDEEP
angularjshtml-table
MrProgram
MrProgram

Reputation: 5242

Create a table from scope object values

I have a table which I'm trying to create from a scope-object that I'm creating in my controller.

I would like the headers to take the value from 'rowHeader', which works fine. But the problem is that I wan't my cell values to be taken from 'cellValue' property.

In my fiddle I've added a "Desired table", thats how I would like the results to be in my first approach. If possible..

As you can see I would like to use a filter on one of the columns as well.

The reason that I would like to use this approach is so that I can use the checkboxlist to hide/show columns, and of course so that I can setup my table easy within the controller

Fiddle: http://jsfiddle.net/HB7LU/21469/

<!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>

Upvotes: 0

Views: 1641

Answers (1)

Shaohao
Shaohao

Reputation: 3531

There is a typo in the code cause the problem:

<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>

You don't have a scope variable called columns, change it to 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>

Upvotes: 1

Related Questions