7
respostas

Dúvida na aula 6 atividade 5

Estou tentando exibir na tela de finalizar pedido, o serviço escolhido, apenas os acessórios, no meu caso adicionais, que foram incluídos e o preço total, mas não estou conseguindo.

Acho que não estou conseguindo debugar e achar o problema, acho que o objeto passado não está com os valores atualizados e não estou conseguindo passar mais de um parâmetro.

A listagem dos adicionais não é preenchida.

Estou fazendo assim:

Trecho da tela finalizar pedido

<ul class="list">
                    <li ng-repeat="adicional in servicoEscolhido.adicionais" ng-show="adicional.adicionado" class="item item-toggle">
                        {{adicional.nome}} - {{adicional.preco | currency}}
                        <label class="toggle toggle-assertive">
                            <input ng-model="adicionado" ng-click="adicionou(adicional, adicionado)" type="checkbox">
                            <div class="track">
                                <div class="handle"></div>
                            </div>
                        </label>
                    </li>
                </ul>

O objeto serviço eu declarei assim:

{
        "nome" : "Serviço",
        "descricao" : "descricao",
        "preco" : 1000,
        "adicionais" : [ {
            "nome" : "adicional 1",
            "preco" : 100,
            "adicionado" : false
        },

E em serviço escolhido eu criei a função que adiciona e remove assim:

$scope.adicionou = function(adicional, adiciononado) {
        if(adiciononado) {
            $scope.precoTotal += adicional.preco;
        } else {
            $scope.precoTotal -= adicional.preco;
        }
        adicional.adiciononado = adiciononado;
    };
7 respostas

Oi Bruno, tudo bem?

O objeto foi passado para a proxima view?

É como se o atributo "adicionado" : false , de acidionais do serviço não fosse alterado ou se eu não conseguisse exibir a lista condicionalmente com o ng-show baseado nele Eu fiz assim

<div class="item item-text-wrap">
                {{servicoEscolhido.nome}} - {{servicoEscolhido.preco | currency}}
                <h2 class="title sub-titulo">Adicionais Opcionais:</h2>
                <ul class="list">
                    <li ng-repeat="adicional in servicoEscolhido.adicionais" class="item item-toggle">
                        {{adicional.nome}} - {{adicional.preco | currency}}
                        <label class="toggle toggle-assertive">
                            <input ng-model="adicionado" ng-click="adicionou(adicional, adicionado)" type="checkbox">
                            <div class="track">
                                <div class="handle"></div>
                            </div>
                        </label>
                    </li>
                </ul>
            </div>
            <div class="item item-divider">
                Valor total: {{precoTotal | currency}}
            </div>

        </div>
        <a href="#/finalizarPedido/{{servicoEscolhido}}" class="button button-block button-assertive">Finalizar Pedido
        <i class="ion-checkmark"></i></a>

Na outra tela eu consigo exibir os dados do serviço mas não os adicionais marcados

<ul class="list">
                    <li ng-repeat="adicional in servicoEscolhido.adicionais" ng-show="adicional.adicionado" class="item item-toggle">
                        {{adicional.nome}} - {{adicional.preco | currency}}
                        <label class="toggle toggle-assertive">
                            <input ng-model="adicionado" ng-click="adicionou(adicional, adicionado)" type="checkbox">
                            <div class="track">
                                <div class="handle"></div>
                            </div>
                        </label>
                    </li>
                </ul>

Na ultima tela, esse objeto aqui: servicoEscolhido.adicionais está certinho? Com os dados que o usuário escolheu na outra tela e tal?

Tem q ver como está populado esse objeto aí, para ver se os dados lá da outra tela estão chegando corretamente.

Vc pode ver debugando a aplicação.

Acho que não está sendo enviado corretamente e não está aparecendo por causa do ng-show que deve estar sempre falso

Se eu tirar o ng-show a lista é exibida

Mas não é a lista correta que vc quer, certo?

Temos que ver como a lista está sendo enviada para essa tela. Ver se está indo com o atributo escolhido marcado.

Faço o debbug antes de enviar a lista e tbm lá na outra view quando vc recebe o objeto.

Como posso debugar? Direto pelo Chrome consigo ver o valor do objeto JS ou preciso dar um console.log?

Oi Bruno.

Desculpe o atraso.

Vc consegue ver o valor do objeto sim. A gente viu como debugar durante o curso. Vc já chegou nesse ponto?

Basta colocar um breakpoint na linha que vc quer parar e depois executar a função normalmente pelo browser, daí ele vai parar na linha que vc colocou o breakpoint

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software