Hide and show according to AngularJS status

Navigation
2

I have two High and Low Buttons, I want that at the beginning when all are true you only see the Low button and if one is in FALSE see the High button 

<table class="table table-sm" ng-init="GetData()">
    <thead>
        <tr>
            <th>Dirección</th>
            <th>Estado</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="l in List">
            <td>{{l.Direccion}}</td>
            <td><i ng-class="l.Estado ? 'btn btn-info btn-sm' : 'btn btn-danger btn-sm'"><b>{{l.Estado ? 'Activo' : 'Inactivo'}}</b></i></td>
            <td>
                <button type="button" class="btn btn-success btn-sm" ng-click="VerIglesia(l.Id)">
                    <span class="fa fa-eye" aria-hidden="true"></span>
                </button>

                <button type="button" class="btn btn-warning btn-sm" ng-click="Editar(l.Id)">
                    <span class="fa fa-pencil" aria-hidden="true"></span>
                </button>

                <button type="button" ng-hide="btnAlta" class="btn btn-info btn-sm" ng-click="Alta(l.Id)">
                    <span class="fa fa-angle-up" aria-hidden="true"></span>Alta
                </button>

                <button type="button" ng-hide="btnBaja" class="btn btn-danger btn-sm" ng-click="Baja(l.Id)">
                    <span class="fa fa-angle-down" aria-hidden="true"></span>Baja
                </button>
            </td>
        </tr>
    </tbody>
</table>

Here I can see some who are active and others inactive

Something like this

    
asked by Rodrigo Rodriguez 26.10.2018 в 05:01
source

4 answers

2

If I understand your buttons well, they depend on the .Estado property of each item in your list. If so, your HTML should look something like: 

<button type="button" ng-hide="l.Estado" class="btn btn-info btn-sm" ng-click="Alta(l.Id)">
    <span class="fa fa-angle-up" aria-hidden="true"></span>Alta
</button>

<button type="button" ng-show="l.Estado" class="btn btn-danger btn-sm" ng-click="Baja(l.Id)">
    <span class="fa fa-angle-down" aria-hidden="true"></span>Baja
</button>
    
answered by 26.10.2018 / 06:14
source
2

For me you should do a ng-if in your query

Then when you have: 

            <button type="button" ng-hide="btnBaja" class="btn btn-danger btn-sm" ng-if="aplicar-condicional">
                <span class="fa fa-angle-down" aria-hidden="true"></span>Baja
            </button>

You can differentiate the condition by using the ng-if function.

Greetings capo.

    
answered by 26.10.2018 в 06:17
2

Use the two buttons you want: 

<button ng-hide=“l.Estado”>
  <span></span>Alta
</button>
<button ng-show=“l.Estado”>
  <span></span>Baja
</button>

This should work.

(I omitted something from the code to show only what's relevant in the question)

    
answered by 26.10.2018 в 05:32
2

Why not add a class to the [disabled] attribute?

In HTML: 

<button ng-disabled="!l.Estado">
  <span></span>Alta
</button>
<button ng-disabled="l.Estado">
  <span></span>Baja
</button>

In CSS: 

button[disabled] {
    visibility: hidden;
}
    
answered by 05.11.2018 в 02:20
How do I get an array of numbers and letters to show separately the result of the sum of the numbers and the whole word? Justify CSS text and enlarge space between characters