Question

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

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更加聪明。我是否需要添加更多范围属性？如何编写链接功能？有什么想法吗？

Answer 1

您可以传递定义将填充每列的属性名称的属性。 E.g：

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

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

Answer 2

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

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

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

2 个答案: