Passe dados adicionais para a função de dados da célula com o Calendário Bootstrap Angular

maravilha 95

Conforme detalhado em uma pergunta anterior , estou usando o Angular Bootstrap Calendar e, de acordo com a documentação, tenho a diretiva config e o controlador configurados para poder personalizar os dados dentro de cada célula. Aqui está o controlador:

(function() {
  angular.module('myApp')
    .controller('calendarController', function($scope, $state, moment, calendarConfig, $http, Formio, shiftService) {

    var vm = this;

    calendarConfig.templates.calendarMonthCell = 'views/calendar/dayTemplate.html';
    calendarConfig.dateFormatter = 'moment';

    vm.events = [];
    vm.calendarView = 'month';
    vm.viewDate = moment().startOf('month').toDate();
    var startDate = moment(this.viewDate).toISOString();
    var endDate = moment(this.viewDate).endOf('month').toISOString();

    var endpoint = 'https://abcdefghijklmno.form.io/shift/submission';
    var token = Formio.getToken();

    var shifts = shiftService.getShiftsMonth(token, startDate, endDate);

    vm.cellModifier = function(cell, shifts) {
      cell.text = 'Test Text';
      //console.log(cell);
    };

    $scope.$on('$destroy', function() {
      calendarConfig.templates.calendarMonthCell = 'mwl/calendarMonthCell.html';
    });
  });
})();

e meu serviço para obter os dados.

(function() {
  angular
    .module('myApp')
    .service('shiftService', shiftService);

  shiftService.$inject = ['$http'];
  function shiftService($http) {
    var getShiftsMonth = function (token, startDate, endDate) {
      var config = {
        headers: {
          'x-jwt-token' : token
        },
        params: {
          'date.date__gte': startDate,
          'date.date__lte': endDate 
          // limit: 10
        }
      };
      return $http.get('https://abcdefghijklno.form.io/shift/submission', config)
        .then(function(response) {
           return response.data;
        });
    };

    var addNameToShift = function(locationid) {
      return $http.get('/my/url/' + locationid);
    };

    return {
      getShiftsMonth: getShiftsMonth,
      addNameToShift: addNameToShift
    };
  }
})();

Eu obtenho os dados personalizados de um endpoint de API, então o que eu quero fazer é obter todos os dados de todo o mês em uma chamada e, em seguida, passá-los para a função modificadora de célula (não quero ter que atingir meu endpoint de API Cerca de 30 vezes diferentes quando um mês é visualizado). No entanto, como cellModifier é chamado do serviço calendarHelper, não vejo nenhuma maneira de passar os dados retornados para a função cellModifier. Preciso apenas adicioná-lo a $ rootScope no controlador para que esteja disponível no modificador ou há uma maneira melhor de colocar esses dados lá?

Obrigado.

maravilha 95

Depois de brincar um pouco mais com isso e obter uma resposta de Matt Lewis, parece que a matriz de eventos é a única maneira de colocar os dados na célula e, a partir daí, você pode adicionar dados conforme necessário. Consegui fazê-lo funcionar reescrevendo um pouco meu controlador:

var onShifts = function(data) {
  vm.events = data;
};

var onError = function(error) {
  vm.error = 'There was an error.';
};

shiftService.getShiftsMonth(token, startDate, endDate)
  .then(onShifts, onError);

vm.cellModifier = function(cell) {
  cell.shifts = this.events;
};

Este artigo é coletado da Internet.

Se houver alguma infração, entre em [email protected] Delete.

editar em
0

deixe-me dizer algumas palavras

0comentários
loginDepois de participar da revisão

Artigos relacionados

Passe dados da função de retorno de chamada JSONP para o controlador Angular

Passando matriz e dados de exibição da API para o calendário de eventos

exibindo linhas com base no valor da célula para entrada de dados - erro de atualização

Passe dados para uma função até o comprimento da matriz

Passando dados da célula de interface do usuário personalizada para visualizar o controlador

Passe os dados da linha para a função Javascript

Passe os dados da linha da tabela para a função de clique

Passe dados para o item da barra de guias (ViewController)

Passe o atributo de dados para bootstrap modal

Passe o contexto correto para funcionar nos dados da caixa de diálogo no Angular

Passe os dados de repetição analisados para a função

Passe os dados de volta para o VC anterior usando delegados e atualize a célula personalizada

Passe dados da função JavaScript como um parâmetro de objeto para @ Html.Action () C #

passe dados de atributo de entrada para outro parâmetro de função de entrada - angular

Tabela de dados ... Como alterar a cor da célula de acordo com o valor da célula da tabela

Como passar dados com o delegado da célula do rodapé para visualizar o controlador?

Passe dados de Angular para .Net Core Web Api com o caractere "/"

Como enviar token apns para o servidor com dados adicionais

Retorno de chamada para tabela de dados quando o usuário altera um conteúdo da célula

Extração de dados diferentes da mesma tabela como campos diferentes com tabelas adicionais como pesquisas

passe os dados da linha selecionada para OnContextItemSelected para realizar a exclusão do banco de dados

Sincronize os dados da planilha com o calendário depois de fazer alterações localmente (por meio do gDrive)

Estrutura de dados para representar uma programação de calendário com uma granularidade de tempo definida?

Passe a função para a coluna no quadro de dados - Python

Preencher os dados para a caixa de listagem da tabela SQL usando o calendário ASP como gatilho

Passe os dados da célula protótipo usando o botão dentro da célula da tabela

Como alterar o estilo da célula da grade de dados com base no operador condicional no WPF

Preencher a célula com o nome da planilha que é a fonte de dados da linha

Usando o Calendário PrimeNG para inserir dados em um banco de dados

TOP lista

  1. 1

    R Shiny: use HTML em funções (como textInput, checkboxGroupInput)

  2. 2

    UITextView não está exibindo texto longo

  3. 3

    Dependência circular de diálogo personalizado

  4. 4

    Acessando relatório de campanhas na AdMob usando a API do Adsense

  5. 5

    Como assinar digitalmente um documento PDF com assinatura e texto visíveis usando Java

  6. 6

    R Folheto. Dados de pontos de grupo em células para resumir muitos pontos de dados

  7. 7

    Setas rotuladas horizontais apontando para uma linha vertical

  8. 8

    O Chromium e o Firefox exibem as cores de maneira diferente e não sei qual deles está fazendo certo

  9. 9

    Definir um clipe em uma trama nascida no mar

  10. 10

    Por que meus intervalos de confiança de 95% da minha regressão multivariada estão sendo plotados como uma linha de loess?

  11. 11

    Como dinamizar um Dataframe do pandas em Python?

  12. 12

    regex para destacar novos caracteres de linha no início e no fim

  13. 13

    Why isn't my C# .Net Core Rest API route finding my method?

  14. 14

    Como obter a entrada de trás de diálogo em treeview pyqt5 python 3

  15. 15

    Tabela CSS: barra de rolagem para a primeira coluna e largura automática para a coluna restante

  16. 16

    How to create dynamic navigation menu select from database using Codeigniter?

  17. 17

    Como recuperar parâmetros de entrada usando C #?

  18. 18

    Changing long, lat values of Polygon coordinates in python

  19. 19

    Livros sobre criptografia do muito básico ao muito avançado

  20. 20

    Método \ "POST \" não permitido no framework Django rest com ações extras & ModelViewset

  21. 21

    Pesquisa classificada, conte números abaixo do valor desejado

quentelabel

Arquivo