Question

我使用angularjs并拥有一个我用两个范围对象构建的表。如果有一些我可以自己添加列的功能，真的很不错。最大的问题是我想使用现有的值并尝试在我的新专栏中使用它们。那可能吗？或者我是否必须在服务器端构建列然后返回它？

<!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">
    <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.id"></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in rows">
                <td ng-repeat="column in columnsTest" ng-if="column.checked">
                    {{ row[column.value] }}
                </td>
            </tr>
        </tbody>
    </table>
    <br><br>
  <input type="button" value="Add new column"  ng-click="addColumn()" />

  <br><br><br>
  <p ng-repeat="c in columnsTest">Column {{$index}}: {{c}}</p>
</div>

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

    app.controller('MainCtrl', function($scope, $filter) {

      $scope.addColumn = function() {
        var newCol = { id: 'Value4', checked: true, value: 'Value1 + Value2 + Value3' }

        $scope.columnsTest.push(newCol);
      }

        $scope.columnsTest = [{
            id: 'Value1',
            checked: true,
            value: 'Value1'
        }, {
            id: 'Value2',
            checked: true,
            value: 'Value2'
        }, {
            id: 'Value3',
            checked: true,
            value: 'Value3'
        }];

        $scope.rows = [{
            id: 1,
            "Value1": 911,
            "Value2": 20,
            "Value3": 20
        }, {
            id: 2,
            "Value1": 200,
            "Value2": 20,
            "Value3": 20
        }];
    });
</script>

Answer 1

您可以使用$parse服务。

将$parse注入控制器并添加新方法：

$scope.getCellValue = function(row, column) {

  var getter = $parse(column.value);
  return getter(row);

  // Alternatively:
  // return $parse(column.value)(row);
};

像这样使用：

<tr ng-repeat="row in rows">
  <td ng-repeat="column in columnsTest" ng-if="column.checked">
    {{ getCellValue(row, column) }}
  </td>
</tr>

演示： http://plnkr.co/edit/DVF2LXeZPqCL1Ik3EyVf?p=preview

说明：

$parse服务接受一个字符串表达式来编译并返回一个getter函数。在您的示例中，我们使用column.value：

var columnValue = 'Value1 + Value2 + Value3';
var getter = $parse(columnValue);

返回的getter函数接受应该针对表达式求值的上下文对象。在您的示例中，我们使用row对象：

var row = { id: 1, "Value1": 911, "Value2": 20, "Value3": 20 };
var result = getter(row);

基本上$parse服务使用字符串表达式和上下文对象并且去：

您想要Value1 + Value2 + Value3，并且您想要检索这些值来自行对象。

这样说明：

var result = row['Value1'] + row['Value2'] + row['Value2'];

Answer 2

使用2D数组，您可以像这样构建数据：

$scope.rows = [
          [911,20,30], // index 0 of 1st dim = 1st row; index 0,1,2 of 2nd dim = cells
          [200,20,30]  // index 1 of 1st dim = 2nd row
        ];

通过这个，您可以使用两个循环来获取单元格并进行计算，第一个循环用于行，第二个循环用于单元格值。

请查看下面的演示或此plunkr。

在演示中我创建了一个函数来执行计算，如果你也传递像[0,1]这样的数组，它将告诉函数只对col0和col1值求和。

var app = angular.module('plunker', []);
        
        app.controller('MainCtrl', function($scope, $filter) {
          
          function sumRows(data, values2sum) {
            // e.g. data = [ [11, 12, 13], [21, 22, 23] ]
            // new col = [ 32, 34, 46]  // sum all
            // new col = [ 32, 34, 0 ] // sum value1 & 2 
            // --> values2sum = [ 0, 1 ]
           
            if ( angular.isUndefined(values2sum) ){
              var all = true;
              var value2sum = [];
            }
            
            angular.forEach(data, function(row, rowIndex) {
              rowSum = 0;
              angular.forEach(row, function(cell, colIndex) {
                if ( all || values2sum.indexOf(colIndex) != -1 ) {
                  rowSum += cell;
                }
              });
              row.push(rowSum);
            })
          }
          
          $scope.addColumn = function() {
            var rowSum, newRow = [], colId = $scope.columnsTest.length + 1;
            
            $scope.columnsTest.push({
                id: 'Value'+ colId,
                checked: true,
                value: 'Value'+colId
            }); // rename columnsTest to tableHeading
            
            //sumRows($scope.rows, [0,2]); // add value1 + value3
            sumRows($scope.rows); // complete sum
            
            //var newCol = { id: 'Value4', checked: true, value: 'Value1 + Value2 + Value3' }
            
            //$scope.columnsTest.push(newCol);
          }

            $scope.columnsTest = [{
                id: 'Value1',
                checked: true,
                value: 'Value1'
            }, {
                id: 'Value2',
                checked: true,
                value: 'Value2'
            }, {
                id: 'Value3',
                checked: true,
                value: 'Value3'
            }];

            /*$scope.rows = [{
                id: 1,
                "Value1": 911,
                "Value2": 20,
                "Value3": 20
            }, {
                id: 2,
                "Value1": 200,
                "Value2": 20,
                "Value3": 20
            }];*/
            
            $scope.rows = [
              [911,20,30],
              [200,20,30]
            ]
            
        });

<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>

<div ng-app="plunker" ng:controller="MainCtrl">
  <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.id"></th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="row in rows track by $index">
        <td ng-repeat="cell in row track by $index">
          <!--ng-if="column.checked">-->
          {{ cell }}
        </td>
      </tr>
    </tbody>
  </table>
  <br>
  <br>
  <input type="button" value="Add new column" ng-click="addColumn()" />

  <br>
  <br>
  <br>
  <p ng-repeat="c in columnsTest">Column {{$index}}: {{c}}</p>
</div>

使用现有值

2 个答案:

说明：