AngularJS: фильтр

86
6

Я создал директиву для таблицы с данными. В таблице используется ng-repeat для рендеринга всех строк/столбцов.

Я создал директиву атрибута для директивы элемента. Цель состоит в том, чтобы получить столбцы, которые вы не хотите включать в таблицу. Полная директива может выглядеть примерно так:

<extended-table exclude="columnone, columntwo"></extended-table>

Таблица интерпретируется как:

<table>
<tr>
<th ng-repeat="column in columns">
{{column}}
</th>
</tr>
<tr ng-repeat="row in data | startFrom:currentRow">
<td ng-repeat="column in columns">
{{row[column]}}
</td>
</tr>
</table>

В ng-repeat s я хотел бы, чтобы он игнорировал значения в exclude, но я немного потерял, куда идти отсюда.

app.directive('exclude', function () {
return function (scope, element, attrs) {

var params = attrs.exclude.split(',');

for (var i = 0; i < params.length; i++) {
params[i] = params[i].trim();
}

scope.exclude = params;
};
});

Как я могу сделать столбец игнорирования ng-repeat как для заголовка, так и для строк, если столбец содержится в массиве $scope.exclude?

app.filter('startFrom', function () {
return function (input, start) {
start = +start;
return input.slice(start);
};
});

спросил(а) 2021-01-19T15:31:53+03:00 2 месяца, 3 недели назад
1
Решение
61

Моя рекомендация состояла бы в том, чтобы вместо этого читать атрибут exclude помощью директивы extended-table, а не создавать настраиваемую директиву для этого.

Вот неполный код, показывающий, как это можно сделать:

myModule.directive('extended-table', function() {
return {
...
scope: {
'exclude': '@' // This says to load the attribute 'exclude' into a scope property of the same name.
}
...
// In your link functions you could process the scope.exclude property as you wish.
};
});

Более подробную информацию можно найти в руководстве The Hitchhikers по Директиве:

@ – binds the value of parent scope property (which always a string) to the local scope. So the value you want to pass in should be wrapped in {{}}. Remember 'a' in braces.
= – binds parent scope property directly which will be evaluated before being passed in.
& – binds an expression or method which will be executed in the context of the scope it belongs.

Самое большое преимущество этого подхода состоит в том, что вы не создаете две директивы, зависящие от eachother.

Заметка:

При использовании @ для привязки не забудьте передать свои свойства с помощью {{}} нотации:

    <myDirective myDirectiveAttribute="{{someProperty}}"/>

ответил(а) 2021-01-19T15:31:53+03:00 2 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема