how to change the true and false by another name within a ng-repeat in AngularJS?

Question

how to change the true and false by another name within a ng-repeat in AngularJS?

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I must change the true and false that arrive from my controller, I am working with ASP.net and the true and false arrive now I need to rename in the view look at the status.

I made this code and it only works for the first value that appears in n elements.

<table class="table table-striped">
    <tr>
        <th>Codigo</th>
        <th>Nombre</th>
        <th>Estado</th>
    </tr>

    <tr ng-repeat="e in ListaDosificacion" ng-class-even="'even'" ng-class-odd="'odd'">
        <td>{e.Codigo}}</td>
        <td>{{e.Nombre}}</td>
        <td>
            <b><p id="EstadoFalse" style="color:red"></p></b>
            <b><p id="EstadoTrue" style="color:blue"></p></b>

            <input type="submit" id="btnEstado" value="{{ e.Estado }}" class="form-control" onclick="estado()" />

            <script type="text/javascript">

                setTimeout(function () { document.getElementById("btnEstado").click(); }, 100);

                function estado() {
                    var estado = document.getElementById("btnEstado").value;

                    if (estado == "true") {
                        document.getElementById("EstadoTrue").innerHTML = "Activo";
                    }
                    if (estado == "false") {
                        document.getElementById("EstadoFalse").innerHTML = "Inactivo";
                    }
                }
            </script>
        </td>
    </tr>
</table>

angularjs

asked by Rodrigo Rodriguez 01.08.2018 в 22:14

source

2 answers

1

It only works for you in the first because you are creating a conflict with the "Id". An Id is a unique identifier of an element, but when creating this, within an ng-repeat you are creating several buttons with the id "btnEstado"

<input type="submit" id="btnEstado" value="{{ e.Estado }}" class="form-control" onclick="estado()" />

My suggestion, use classes instead of id

<input type="submit" value="{{ e.Estado }}" class="btnEstado form-control" onclick="estado()" />

Lue the script, you write it until the end of the document.

Now everything is like this

<table class="table table-striped">
    <tr>
        <th>Codigo</th>
        <th>Nombre</th>
        <th>Estado</th>
    </tr>

    <tr ng-repeat="e in ListaDosificacion" ng-class-even="'even'" ng-class-odd="'odd'">
        <td>{e.Codigo}}</td>
        <td>{{e.Nombre}}</td>
        <td>
            <b><p id="EstadoFalse" style="color:red"></p></b>
            <b><p id="EstadoTrue" style="color:blue"></p></b>

            <input type="submit" value="{{ e.Estado }}" class="btnEstado form-control" onclick="estado()" />

        </td>
    </tr>
</table>


< script type = "text/javascript" >

  function estado() {
    var btns = document.getElementsByClassName("btnEstado");

    for(i=0; i<btns.length; i++){
        var estado = btns[i].value;
        if (estado == "true") {
            btns[i].innerHTML = "Activo";
        }
        if (estado == "false") {
           btns[i].innerHTML = "Inactivo";
        }
    }

    estado(); // si agregas esta línea va a ejecutar la función al iniciar y o va a esperar a que hagas click en cada elemento
  } 
< /script>

answered by 01.08.2018 в 23:00

to href URL refresh or stop loop How to filter explicit images when the user uploads their profile picture in php?

score 1 · Accepted Answer

Assuming that you need to show the states of one color or another depending on whether it is active or not, I attach the following code:

<!DOCTYPE html>
<html ng-app="App">

  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
  </head>

  <body ng-controller="Ctrl">        
    <table class="table table-striped">
    <tr>
        <th>Codigo</th>
        <th>Nombre</th>
        <th>Estado</th>
    </tr>

    <tr ng-repeat="e in ListaDosificacion" ng-class-even="'even'" ng-class-odd="'odd'">
        <td>{{e.Codigo}}</td>
        <td>{{e.Nombre}}</td>
        <td>
            <i class="fa fa-2x" ng-class="e.Estado ? 'fa-check text-success' : 'fa-times text-danger'">{{e.Estado ? 'Activo' : 'Inactivo'}}</i>
        </td>
    </tr>
</table>
  </body>

<script>
  var app = angular.module('App', []);
  app.controller('Ctrl', ['$scope', function($scope){
    $scope.ListaDosificacion = [
        { Codigo: 1, Nombre: 'Uno', Estado: true },
        { Codigo: 2, Nombre: 'Dos', Estado: false },
        { Codigo: 3, Nombre: 'Tres', Estado: false }
      ]
  }])
</script>
</html>

There are certain things that I did not understand about your code, for example that you are showing a submit and you are assigning the value e.Estado ; and above you assign colors depending on the same state. I guess you wanted to paint the register state depending on its value (true / false) , so I clung to that intuition to answer you.

Another thing, if you are going to use AngularJS , which is a very powerful Framework, you should try to use its features completely, for example use ng-click at the expense of onclick which is clearly Javascript .

Greetings and excellent colleague code!