0

Tenho a situação: na tabela abaixo, quando eu clico em "editar", exibe o form com os campos necessários (inclusive com um novo botão de "cancelar"). Até aqui está tudo funcionando bem. O problema é que ao salvar, o form deveria desaparecer (ng-hide) e voltar a apresentar os dados normais. Logo abaixo tem um trecho com o JS. Ao que entendi não estou conseguindo mudar a "editing" depois de salvar.

Tabela com telefones

<form name="telefoneEdit">
    <table class="table table-hover">
        <thead>
            <tr>
                <th width="30%">Telefone</th>
                <th width="20%">Ramal</th>
                <th width="40%">Descrição</th>
                <th width="10%"></th>
            </tr>
        </thead>
        <tbody ng-repeat="telefone in clienteCtrl.cliente.ClienteTelefone" ng-form="tel" ng-init="editing = false">
            <tr ng-show="!editing">
                <td>{{telefone.tel}}</td>
                <td>{{telefone.ramal}}</td>
                <td>{{telefone.descricao}}</td>
                <td class="text-center">
                    <a ng-click="editing = true" class="btn btn-default btn-xs"><i class="icon-pencil2"></i></a>
                </td>
            </tr>
            <tr ng-show="editing">
                <td>
                    <div class="col-md-4">
                        <input ng-model="telefone.ddd" type="number" name="ddd" max="99" ng-maxlength="2" class="form-control input-sm"></input>
                        <label class="error" ng-show="tel.ddd.$invalid">Campo inválido</label>
                        <label class="error" ng-show="erros.ddd">{{erros.ddd[0]}}</label>   
                    </div>
                    <div class="col-md-8">
                        <input type="number" name="telefone" ng-model="telefone.telefone" class="form-control input-sm" ng-minlength="8" required></input>
                        <label class="error" ng-show="tel.telefone.$invalid">Campo inválido</label> 
                    </div>                                  
                </td>
                <td>
                    <input ng-model="telefone.ramal" class="form-control input-sm"></input>
                </td>
                <td>
                    <input ng-model="telefone.descricao" class="form-control input-sm"></input>
                </td>
                <td class="text-center">
                    <button class="btn btn-default btn-xs" type="button" ng-click="editTelefone(telefone)"><i class="icon-disk"></i></button>
                    <a ng-click="editing = false" class="btn btn-default btn-xs"><i class="icon-close"></i></a>
                </td>
                <input type="hidden" ng-model="telefone.id" />
            </tr>
        </tbody>
    </table>
</form> 

Trecho do JS que deveria funcionar

$scope.editTelefone = function(telefone) {            
    var erros = {};
    var _data = {};
    _data.ClienteTelefone = telefone;
    self.editing = false;
    $http
        .post('api/cliente_telefones/edit.json',_data)
        .success(function(data){
            if(data.erros) {
                $scope.erros = data.erros;
            } 
            else {
                self.telefone = telefone;
                $scope.erros = false;
                $scope.editing = false;
            }
        })
}

Tudo funciona corretamente, só não consigo esconder o form novamente.

Imagens ilustrativas

Tabela em seu estado original/inicial Tabela em seu estado original/inicial

Form de edição Form de edição

Resultado após submeter o form de edição Resultado após submeter o form de edição

4
  • Você colocou a tag de angularjs-directives, esse código JS que você postou está dentro de um directive? ou de um controller? Commented 6/01/2016 às 0:18
  • Está em um controller Commented 6/01/2016 às 0:19
  • Você conseguiu verificar se está tendo algum retorno dentro do success? Se o resultado que você espera realmente está chegando? Commented 6/01/2016 às 0:27
  • @CelsomTrindade está tudo funcionando corretamente: os dados são enviados e salvos no banco sem problemas. Mas o $scope.editing = false não está refletindo nenhum efeito. Este é o problema. Commented 6/01/2016 às 0:31

1 Resposta 1

1

Um ponto a ser observado é o uso do self. Posso estar enganado, mas pelo que sei, no controller nós usamos this ou, mais comumente utilizado através da syntax vm deste modo:

var vm = this;

Mas seria necessário mudar a syntax de definição do controller no DOM para controller as vm e todos os valores de scope deveriam possuir o prefixo vm. ex.: ng-show="vm.editing". Como não é o seu caso, recomendo que não utilize a referencia de self e utilize diretamente $scope.

Outra observação a ser feita, é sobre a definição do ng-repeat. Você declarou diretamente na tag tbody, o que não é o aconselhável. Como você precisa repetir 2 blocos de tr você deve utilizar uma opção do ng-repeat que, inclusive, é muito pouco usado/comentado, que seria:

ng-repeat-start="item in items"
&
ng-repeat-end

No seu caso, deve ser usado assim:

<tr ng-show="!editing" ng-repeat-start="telefone in clienteCtrl.cliente.ClienteTelefone">
    //.. restante do primeiro bloco de código
</tr>
<tr ng-show="editing" ng-repeat-end>
    //.. restante do bloco de edição
</tr>

Quanto ao problema em si de esconder o formulário após a edição, o problema acontece por que a variável $scope.editing está definida dentro do ng-repeat, ou seja, para cada bloco que repetir, sempre vai existir essa variável, então ele irá habilitar/desabilitar todos de uma única vez.

Uma solução que usei quando tive um problema semelhante foi de criar um novo campo dentro da array e controlar a exibição a partir desse campo, deixando sua array assim por exemplo:

$scope.telefones = [
    {id:1, visible: false, telefone: '(48)99665588'},
    //..mais objetos
]

E dentro do controller, controlaríamos a exibição de acordo com o campo "visible", assim somente o objeto desejado estará apto para edição.

$scope.mostraEdit = function(id) {
  $filter('filter')($scope.telefones, {id: id})[0].visible = true;
};
$scope.escondeEdit = function(id) {
  $filter('filter')($scope.telefones, {id: id})[0].visible = false;
};
$scope.salvaTelefone = function(data) {
  $filter('filter')($scope.telefones, {id: data.id})[0].visible = false;
};

E no DOM teríamos isso:

<tr ng-show="!telefone.visible" ng-repeat-start="telefone in telefones" ng-form="tel">
  //.. listagem de telefones
</tr>
<tr ng-show="telefone.visible" ng-repeat-end>
    //.. formulario de edição
</tr>
8
  • Excelentes observações. Vou testar e informo o resultado. Quanto ao self, ele está definido anteriormente no código como um var self = this Commented 6/01/2016 às 0:50
  • Certo. Então não tem problema utilizar a definição de self mas lembre-se, ele não vai funcionar a não ser que você mude toda a syntax do seu código. Neste caso, recomendo não utilizar como self pois você está utilizando a referencia de $scope no DOM e Controller. Ou mude tudo para syntax as, como comentei, ou mude para $scope.variavel Commented 6/01/2016 às 0:53
  • estive aplicando suas sugestões. A questão do 'ng-repeat' ficou perfeita. Mas o grande problema, que é esconder o form quando a resposta está correta, ou seja, setando '$scope.editing = false' continua sem funcionar. Vou adicionar na postagem imagens exemplificando o caso. Commented 6/01/2016 às 12:13
  • Você já substituiu o uso do self dentro do editTelefone() ? Commented 6/01/2016 às 12:46
  • Sim, já tinha feito isso antes. Commented 6/01/2016 às 12:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .