Arhn - архитектура программирования

Динамически добавить фильтр в ng-repeat

Я создаю таблицу, в которой строки и столбцы строятся полностью на основе данных, которые ей отправляются.

Я очень близок к тому, чтобы это сработало, мне трудно понять, как создать собственный фильтр и динамически передавать шаблоны фильтров.

Объект, из которого состоят столбцы, выглядит так:

{ name: 'transactionDate', displayName: 'Date / Time', displayOrder: 1, filter: "date: 'MM/dd/yy hh:mm a'" }

Объект, из которого состоит транзакция для строк, выглядит следующим образом:

{ transactionDate: '2015-06-11', transactionType: 'This Type', transactionAmount: 25 }

HTML у меня такой:

<td ng-repeat="col in columns">{{transaction[col.name] | dynamicFilter: col.filter}}</td>

Фильтр, который я сейчас создал:

function dynamicFilter($filter) {
    return function (value, filter) {
        console.log(filter);
        console.log(value);
        var test = $filter(filter)(value);
        return test;
    }
}

И фильтр, и значение передаются правильно. У меня возникли проблемы с выяснением того, как применить фильтр к значению перед возвратом. Значение, которое может быть передано, будет 2015-06-10T16:17:14, а фильтр, который будет передан, может быть date: 'MM/dd/yy hh:mm a' для создания фильтра даты/времени. Или 21 и currency для долларовой стоимости.

Я хотел бы иметь возможность использовать встроенные функции Angular так же, как и в представлении

angularjs angularjs-ng-repeat angularjs-filter
12.06.2015

Ответы:


1

Для этих динамических фильтров, которые имеют частичные параметры (например, формат, который вы предоставляете с датой), вы должны удалить параметр из фильтра и применить его позже.

Итак, filter: "date: 'MM/dd/yy hh:mm a'" должно быть просто filter: "date".

Дополнительное ограничение MM/dd/yy hh:mm a будет отправлено вместе со значением $filter(filter)(value, 'MM/dd/yy hh:mm a');.

Чтобы сделать это в общем, вы можете воспользоваться apply. Объект может быть:

{filter: { type: "date", params: ['MM/dd/yy hh:mm a'] } }

И директива может иметь (при условии, что вы также отправляете параметры):

var filterFn = $filter(filter.type); 
return filterFn.apply(filterFn, [value].concat(filter.params));

EDIT: вот JSFiddle с двумя кнопками, первая демонстрирует ваш оригинальный подход с "датой: 'MM/dd/yy hh:mm a'", а вторая демонстрирует прикладной подход, который я описал выше < href="http://jsfiddle.net/4whemakt/" rel="nofollow">http://jsfiddle.net/4whemakt/

12.06.2015
  • Я работаю по этому пути, и когда я прохожу через filterFn, как и ожидалось, назначается filterFn = (date, format, timezone). Тем не менее, возвращение не возвращается ни с чем 12.06.2015
  • Должно быть $filter('date')(value, format, timezone);. Который можно так же назвать как var filterFn = $filter('date'); filterFn.apply(filterFn, [value, format, timezone]); . Демонстрация JSFiddle, которую я добавил к ответу, должна помочь. 12.06.2015

    • 2

    Вы можете применить и вернуть отфильтрованное значение условно в вашем dynamicFilter. Что-то вроде этого

    function dynamicFilter($filter) {
    return function (value, filter) {
        if (filter.indexOf('date:') !== -1) {
           //Note: I am using moment js to format the date
           return moment(value).format(filter.match(/'([^']+)'/)[1]);
        }
        else {
            return $filter(filter)(value)
        }
    }
}

    ссылка на moment.js http://momentjs.com/

    12.06.2015
  • Но могу ли я использовать встроенные фильтры, которые использует angularjs? 12.06.2015
  • Вы можете использовать, если это соответствует вашим требованиям. filter.match(/'([^']+)'/)[1] в моем ответе извлечет и предоставит вам строку формата даты из фильтра. 12.06.2015
  • Но я пишу собственные правила для вещей, которые уже встроены в Angular. Мне нужно одно и для валюты. Похоже на какое-то дублирование 12.06.2015
  • На самом деле это зависит от того, что вам нужно. Если вам помогает то, что предоставляет angular, то всегда лучше использовать его, а не писать собственные фильтры. 12.06.2015
    • Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..