在绑定元素时从作用域对象添加格式

add formatting from scope object when binding element

本文关键字：对象 添加 格式 作用域 绑定 元素      更新时间：2023-09-26

我有一个表，它是根据我在控制器中创建的数组构建的。当尝试绑定时，我想从对象数组中添加格式，例如|number。

所以，在tbody内部的td元素中，我想使用类似的东西

row[column.rowValue]| column.filter

我试过使用｛｛｝｝，也试过ng绑定模板等等。

我该怎么做？

JSFIDDLE

html:

<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:controller="MyCtrl">
<table class="table table-striped table-hover table-responsive table-bordered" border="1">
        <thead style="font-weight: bold;">
            <tr>
                <th class="text-right" ng-repeat="column in columns" ng-bind="column.rowHeader"></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in rows">
                <td ng-repeat="column in columns" ng-bind="row[column.rowValue] | column.filter"></td> <--doesnt work
            </tr>
        </tbody>
    </table>

</div>

js:

var app = angular.module('myApp',[]);

 function MyCtrl($scope) {
  $scope.columns = [
    { checked: true, rowValue: 'value1', rowHeader: 'Value1', filter: 'number' },
    { checked: true, rowValue: 'value2', rowHeader: 'Value2', filter: 'number' },
    { checked: true, rowValue: 'ModelName', rowHeader: 'Name' }
];
$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" }
  ];
}

使用控制器中的函数来格式化值，如果需要使用自定义过滤器，则注入$filter服务。

var app = angular.module('myApp',[]);

function MyCtrl($scope, $filter) {
    $scope.columns = [
        { checked: true, rowValue: 'value1', rowHeader: 'Value1', filter: 'number' },
        { checked: true, rowValue: 'value2', rowHeader: 'Value2', filter: 'number' },
        { checked: true, rowValue: 'ModelName', rowHeader: 'Name' }
    ];
    $scope.formatRow = function(value, filterName){
        return $filter(filterName)(value);
    };
    $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" }
      ];
    }

HTML

<tbody>
    <tr ng-repeat="row in rows">
       <td ng-repeat="column in columns" ng-bind="formatRow(row[column.rowValue], column.filter)"></td> 
                </tr>
</tbody>
相关文章：