How to show or hide some element with AngularJS, without creating variable

Question

How to show or hide some element with AngularJS, without creating variable

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

1

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

Order Lita:

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, you will see the inputs with the same modulo of the values shown in the table, which are not initially hidden, to make changes

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

I thought of adding a property editando to request, but since this property is not any data from the request, I wanted to know if there is any way to do this, without adding modal property

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

javascript angularjs

asked by anonymous 16.01.2015 / 16:21

3 answers

DLL to encrypt a string List tables with specific column

score 1 · Answer 1

ng-if=""

Ps: Always prefer ng-if instead of ng-hide because hide is still in DOM, only with display: none then all dirty checks are done even though they are not visible ...

ng -if removes elements from the DOM by preventing undue processing ... and is reinserted into the DOM when the expression becomes true.

score 0 · Answer 2

Add initial edit 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>

score 0 · 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