Question

我创建了一个包含一组嵌套ngrepeats的自定义指令。外部重复行的数据。内部重复列模板。

<div ng-repeat="item in data">
    <div ng-repeat="col in columns">
        {{col.templateContent}}
    </div>
</div>

集合就像这样

$scope.data = [
    {firstName: 'John', lastName: 'Doe', email: 'email@test.com'},
    {firstName: 'John', lastName: 'Doe', email: 'email@test.com'},
    {firstName: 'John', lastName: 'Doe', email: 'email@test.com'},
];

$scope.columns = [
    {templateContent: '{{item['firstName']}} {{item['lastName']}}'}
];

运行时，它会将templateContent显示为字符串＆＃34; {{item [＆＃39; firstName＆＃39;]}} {{item [＆＃39; lastName＆＃39;]}}＆＃34 ;。如何才能动态评估变量的内容？

他们会像这样使用。

<datagrid endpoint="User" query="userQuery" enable-paging="true" aggregate-search="search">
    <templatecolumn header-text="Name">
       {{firstName}} {{lastName}}
    </templatecolumn>
</datagrid>

这是我的两个指令。

app.directive('templatecolumn', function () {
    return {
        restrict: 'E',
        replace: false,
        transclude:true,
        scope: {
            headerText: '@',
            enableSorting: '@'
        },
        require: '^datagrid',
        link: function (scope, element, attrs, parentController, transclude) {

            transclude(scope, function (clone) {
                // clone is transcluded content
                scope.enableSorting = scope.enableSorting === 'false' ? false : scope.enableSorting !== false;

                parentController.addColumn({
                    isTemplateColumn: true,
                    headerText: scope.headerText,
                    enableSorting: scope.enableSorting,
                    templateContent: clone.html().replace(/{{/g, "{{item['").replace(/}}/g, "']}}")
                });
            });
        },
        template: '<div></div>'

    };
});



app.directive('datagrid', function ($compile) {
    return {
        restrict: 'E',
        scope: {
            endpoint: '@',
            query: '=',
            enablePaging: '@',
            keyField: '@',
            aggregateSearch: '='
        },
        transclude:true,
        replace: true,
        templateUrl: 'app/ui/partials/datagrid.html',
        compile: function ($element, $attrs, linker) {
            if (!$attrs.keyField) { $attrs.keyField = 'id'; } // keyField = id as default
        },
        controller: ['$scope', 'dataSvc', function ($scope, dataSvc) {
            $scope.columns = [];
            $scope.data = [];


            $scope.recordsPerPage = 10;
            $scope.orderby = '';
            $scope.totalRecords = 0;
            $scope.currentPage = 1;
            $scope.aggregateFilterQuery = '';

            $scope.dataService = new dataSvc($scope.endpoint);

            $scope.loadGrid = function (orderby) {

                if (orderby) {
                    if ($scope.orderby.substring(0, orderby.length) === orderby) { // if same property as previous sort
                        if ($scope.orderby.indexOf(' desc') == -1) { // toggle desc/asc
                            orderby = orderby + ' desc';
                        } else {
                            orderby = orderby.replace(' desc', '');
                        }
                    }
                    $scope.orderby = orderby;
                }

                $scope.query
                    .orderby($scope.orderby)
                    .skip(($scope.currentPage - 1) * $scope.recordsPerPage)
                    .top($scope.recordsPerPage);

                if ($scope.aggregateSearch && $scope.aggregateFilterQuery) {
                    $scope.query.filter($scope.aggregateFilterQuery.replace(/{{search}}/g, $scope.aggregateSearch));
                }

                $scope.dataService.get($scope.query).success(function (data) {
                    $scope.data = data.value;
                    $scope.totalRecords = data['@odata.count'];
                });
            };

            $scope.$watch('aggregateSearch', function () { $scope.loadGrid(); });

            $scope.delete = function(id) {
                $scope.dataService.delete(id).success(function () {
                    $scope.loadGrid();
                });
            };

            this.addColumn = function (column) {
                $scope.columns.push(column);

                if (column.enableAggregateFilter) {
                    $scope.aggregateFilterQuery += ($scope.aggregateFilterQuery ? " or " : "") + "contains(" + column.dataitem + ", '{{search}}')";
                }
            }
        }]
    };
});

Answer 1

试试这个：

<div ng-repeat="item in data">
    <div ng-repeat="col in columns">
        {{col(item)}}
    </div>
</div>

并将您的列更新为：

$scope.columns = [
    function(item) { return item.firstName + ' ' + item.lastName; }
];

如何使用ng Repeat在范围变量中进行评估？

1 个答案: