0

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

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。如何丢弃我不想要的其他两个属性？从我的部分模板中可以看出，我使用的是 double ng-repeats。

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

4

2 回答 2

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/

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

于 2014-10-14T11:53:43.147 回答
0

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

                    '<td ng-repeat="obj in component">'
                      '{{obj[passedInDisplayKey]}}'
                    '</td>'
于 2014-10-14T11:53:06.400 回答