How to show or hide an element with Angularjs, without creating variable

Question

I’m trying to make a table, where it shows the list of orders and the button for editing

Lita of request:

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}
];

When you click on the Edit button, the inputs appear with the same module of the values shown in the table, which is initially hidden, to make changes

How can I do this function to show and hide inputs?

I thought I’d add some property editando for request, however as this property is not any data of the request, I wondered if you have any way to accomplish this, without adding property in 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>

Answer 1

ng-if=""

Ps: Always prefer ng-if instead of ng-Hide because Hide is still in the DOM, only with display:None so all Dirty checks are done even without them being visible...

ng-if removes DOM elements preventing improper processing qq... and are reinserted into DOM when the squeeze becomes true.

Answer 2

Add initial editing value

<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>

Answer 3

<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
        })
    };
}]);

Example: Jsfiddle