具有不同对象属性的表的自定义指令答案

【问题标题】：Custom Directive for Table with different object properties具有不同对象属性的表的自定义指令
【发布时间】：2014-10-14 11:26:00
【问题描述】：

假设我想编写一个可重用 + 通用指令，该指令将在我的整个项目中使用。该指令将显示一个表格，如下所示：

angular
    .module('demo')
    .directive('indexTable', function() {
        return {
            restrict: 'A',
            template: '<tr ng-repeat=" component in components>' +
                        '<td ng-repeat="obj in component">' +
                          '{{obj}}' + 
                        '</td>' + 
                       '</tr>',
            scope: {
                 components: '=',
            },
            link: function (scope, attrs) {
            }
        }
    });

假设在我的控制器中我有两个不同的数组，每组有两组具有不同属性的不同对象：

//some mockup data
angular.module('demo')
   .controller('demoCtrl',['$scope',function($scope){
    //array 1
    $scope.userArray = [
      {Id:1 , Name: 'Chuck Norris', Age:'21'},
      {Id:2 , Name: 'George Bush' , Age: '42'}
    ];
    //array 2 
    $scope.itemArray = [
      {Id:1, ProductNo: '001', BasePrice: 20.20, Value: 50.50} 
      {Id:2, ProductNo: '002', BasePrice: 20.20, Value: 50.50} 
    ];
}]);

所以基本上问题是：我如何选择（在控制器中）要在表格中显示的属性是什么？

问题深入：现在我有两个不同的数组，每个数组都有自己的属性。我将如何在我的 HTML 中使用它

<div index-table components="userArray"></div>

以itemArray 为例。每个对象将有 4 个属性，即 Id、ProductNo 等。但在我的表格中，我只想显示其中的 2 个，例如 ProductNo 和 BasePrice。如何丢弃我不想要的其他两个属性？正如您从我的部分模板中看到的那样，我使用的是双重ng-repeats。

到目前为止我考虑过/尝试过的事情：尝试将对象映射到数组，但我相信 ng-repeat 更智能。我需要添加更多范围属性吗？如何编写我的链接功能？有什么想法吗？

【问题讨论】：

标签： javascript angularjs angular-directive

【解决方案1】：

您可以传递一个属性来定义将填充每一列的属性名称。例如：

<table index-table
    components="itemArray"
    columns="ProductNo,BasePrice"
></table>

您的指令必须稍作修改：

app.directive('indexTable', function() {
    function parseProps(str) {
        // implement parse logic, return an array of strings - the property names
    }

    return {
        restrict: 'A',
        template:
            '<tr ng-repeat="component in components">' +
                '<td ng-repeat="name in props">' +
                    '{{ component[name] }}' + 
                '</td>' + 
            '</tr>',
        scope: {
            components: '='
        },
        link: function (scope, elem, attrs) {
            scope.props = parseProps(attrs.columns);
        }
    };
});

您可以在此处查看示例实现：http://jsfiddle.net/y54x0hcd/

这有很多粗糙的边缘（例如：列标题？）；也许使用网格库会更好。

【讨论】：

感谢指教！并感谢您的正则表达式！列标题没问题。我为它添加了另一个scope 组件。我选择不使用网格库。这可以满足我的需求，并且我使用此指令将代码减少了至少 30% :)

【解决方案2】：

为什么不将您希望显示的属性传递给您的指令？然后你的 ng-repeat 看起来像这样：

                    '<td ng-repeat="obj in component">'
                      '{{obj[passedInDisplayKey]}}'
                    '</td>'

【讨论】：