1

Estou tentando fazer uma tabela, onde mostra a lista dos pedidos e o botão para edição

Lita de pedido:

var lista = [
    {id: 1, nome: 'Pedido 1', ano1: 100, ano2: 200},
    {id: 2, nome: 'Pedido 2', ano1: 100, ano2: 200},
    {id: 3, nome: 'Pedido 3', ano1: 100, ano2: 200},
    {id: 4, nome: 'Pedido 4', ano1: 100, ano2: 200},
    {id: 5, nome: 'Pedido 5', ano1: 100, ano2: 200}
];

Ao clicar no botão Editar, aparece os inputs com mesmo modulo dos valores mostrado na tabela, que no inicialmente esta escondidos, para fazer alteração

Como eu posso fazer essa função para mostrar e esconder os inputs?

Pensei em adicionar uma propriedade editando para pedido, porem como essa propriedade não é nenhum dado do pedido, queria saber se tem alguma forma para realizar isso, sem adicionar propriedade no modal

<table class="table">
    <tr>
        <td>
            <input type="checkbox" ng-click="selecionarTudo($event, lista)">
        </td>
        <td>Nome</td>
        <td>Ano 1</td>
        <td>Ano 2</td>
        <td>Ação</td>
    </tr>

    <tr ng-repeat="pedido in selecionado" ng-click="tableCheck($event, pep)">
        <td>
            <input type="checkbox" ng-model="pedido.selected">
        </td>
        <td>{{pedido.nome}}</td>
        <td>
            {{pedido.ano1 | currency | real}}
            <input type="text" ng-model="pedido.ano1">
        </td>
        <td>
            {{pedido.ano2 | currency | real}}
            <input type="text" ng-model="pedido.ano2">
        </td>
        <td>
            <button class="btn">Editar</button>
        </td>
    </tr>
</table>
3
  • Quando você diz "sem criar variável" está querendo dizer que não quer adicionar uma nova propriedade ao pedido ou que realmente não quer declarar mais nada no escopo? Commented 16/01/2015 às 15:32
  • isso mesmo, mas acabei de conseguir, já vou atualizar, postando resultado
    – Lai32290
    Commented 16/01/2015 às 15:37
  • 2
    @Lai32290, você pode postar a resposta e marcar como aceita. Daí sua pergunta sai da fila de sem resposta e você ainda ganha reputação ;)
    – Caputo
    Commented 16/01/2015 às 16:15

3 Respostas 3

2

ng-if=""

Ps: Prefira sempre o ng-if ao invés de ng-hide porque o hide ainda continua no DOM, apenas com display:none então todos os dirty checks são feitos mesmo sem que eles estejam visíveis...

ng-if remove os elementos do DOM evitando qq processamento indevido... e são reinseridos no DOM quando a espressão se torna true.

0

Adicionar valor inicial de edição

<table class="table">
    <tr>
        <td>
            <input type="checkbox" ng-click="selecionarTudo($event, lista)" ng-init="editar[$index] = false">
        </td>
        <td>Nome</td>
        <td>Ano 1</td>
        <td>Ano 2</td>
        <td>Ação</td>
    </tr>

    <tr ng-repeat="pedido in selecionado" ng-click="tableCheck($event, pep)">
        <td>
            <input type="checkbox" ng-model="pedido.selected">
        </td>
        <td>{{pedido.nome}}</td>
        <td>
            <span ng-hide="editar[$index]">{{pedido.ano1 | currency | real}}</span>
            <input type="text" ng-model="pedido.ano1" ng-show="editar[$index]">
        </td>
        <td>
            <span ng-hide="editar[$index]">{{pedido.ano2 | currency | real}}</span>
            <input type="text" ng-model="pedido.ano2" ng-show="editar[$index]">
        </td>
        <td>
            <button class="btn" ng-click="editar[$index] = !editar[$index]">Editar</button>
        </td>
    </tr>
</table>
0
0
<table class="table" ng-app="app" ng-controller="MainController">
    <tr>
        <td>
            <input type="checkbox">
        </td>
        <td>Nome</td>
        <td>Ano 1</td>
        <td>Ano 2</td>
        <td>Ação</td>
    </tr>
    <tr ng-repeat="pedido in lista">
        <td>
            <input type="checkbox" ng-model="pedido.selected">
        </td>
        <td>{{pedido.nome}}</td>
        <td>
            <div ng-hide="$index==editar">{{pedido.ano1 | currency }}</div>
            <input type="text" ng-model="pedido.ano1" ng-show="$index==editar">
        </td>
        <td>
            <div ng-hide="$index==editar">{{pedido.ano2 | currency }}</div>
            <input type="text" ng-model="pedido.ano2" ng-show="$index==editar">
        </td>
        <td>
            <button class="btn" ng-click="edit($index)"  ng-hide="$index==editar">Editar</button>
            <button class="btn" ng-click="edit('X')"  ng-show="$index==editar">Salvar</button>
        </td>
    </tr>
</table>




angular.module('app', []).
controller('MainController', ['$scope', function ($scope) {
    $scope.things = [{
        id: 1,
        shown: true
    }, {
        id: 2,
        shown: false
    }, {
        id: 3,
        shown: true
    }, {
        id: 4,
        shown: false
    }, {
        id: 5,
        shown: true
    }, ];
    $scope.flipMode = function () {
        $scope.things.forEach(function (thing) {
            thing.shown = !thing.shown
        })
    };
}]);

Exemplo: JSFiddle

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 .