Как использовать функцию в шаблоне столбца сетки кендо с AngularJS

У меня есть столбец в сетке кендо, который я хочу выполнить определенную логику при рендеринге и использую Angular. У меня есть столбцы сетки, настроенные с помощью директивы k-columns.

после документация, это казалось простым: я мог добавить опцию шаблона в свой столбец, определить функцию для выполнения моей логики и передать значение dataItem. То, что у меня есть, выглядит примерно так:

k-columns='[{ field: "Name", title: "Name", 
    template: function (dataItem){
        // Perform logic on value with dataItem.Name
        // Return a string
    }
}]'

однако запуск этого вызывает синтаксическая ошибка, жалующаяся на символ " { " , который формирует открытие блока в моей функции.

Я видел несколько примеров определения функции шаблона в таком формате. Есть что-то еще, что нужно сделать, чтобы это работало? Я делаю что-то неправильно? Есть ли другой способ определить шаблон как функцию и передать ему данные столбца? (Я попытался сделать функцию на моем $ scope, которая работала, за исключением того, что я не мог понять, как получить данные в функцию.)

Спасибо за помощь.

10
angularjs grid javascript kendo-ui templates

4 ответов

похоже, что определение шаблона столбца таким образом не поддерживается при использовании AngularJS и Kendo. Этот подход работает для проектов, которые не используют Angular (standard MVVM), но терпит неудачу с его включением.

обходной путь, который обнаружил мой коллега, заключается в создании шаблона с помощью ng-bind для указания функции шаблонов на $scope, все внутри диапазона:

template: "<span ng-bind=templateFunction(dataItem.Name)>#: data.Name# </span>"

это подход к шаблону столбцов по умолчанию, который реализуется с помощью Телерик в их кендо-угловом исходном коде. Я еще не знаю, есть ли данные.Значение имени требуется или нет, но это работает для нас.

13

предупреждение: не имеют доступа к кендо, чтобы проверить код на данный момент, но это должно быть очень близко

в вашем случае вы назначаете строку a значению K-столбцов, и эта строка содержит слово function и твоя фигурная скобка {

вам нужно убедиться, что функция выполняется ... что-то вроде этого:--7--> 

k-columns=[
    {
       field: "Name",
       title: "Name", 
       template: (function (dataItem){
        // Perform logic on value with dataItem.Name
        // Return a string
       }())
    }
];

обратите внимание на разницу:

мы создаем объект-реальный Честное слово объект, и мы используем жизнь заполнить template собственность.

5

возможно, это будет полезно для кого - то-этот код работает и для меня:

columns: [
                { field: "processed", title:"Processed", width: "100px",
                    template: '<input type="checkbox" ng-model="dataItem.processed" />' },

и вы получаете двухстороннюю привязку с чем-то вроде этого:

<div class="col-md-2">
            <label class="checkbox-inline">
                <input type="checkbox" ng-model="vm.selectedInvoice.processed">
                processed
            </label>
        </div>
3

после нескольких часов поиска. Вот вывод, который сработал: доступ к данным сетки как {{dataItem.masterNoteId}} и ваши данные $scope как просто имя свойства или функция.

пример

            template: '<a href="\#/ops/order/{{orderId}}/note/{{dataItem.masterNoteId}}"><i class="fa fa-edit"></i></a>',

Я очень надеюсь, что это сейфы кто-то жизнь:)

0