0

debo cambiar el true y false que llegan de mi controlador, estoy trabajando con ASP.net y llegan los true y falses ahora necesito renombrar en la vista mira el estado.

hice este codigo y solo me funciona para el primer valor que me aparezca de n elementos.

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

2 respuestas 2

1

Asimilando que necesitas mostrar los estados de un color u otro dependiendo si esta activo o no, te adjunto el siguiente codigo:

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

Hay ciertas cosas que no entendí de tú código, por ejemplo que estas mostrando un submit y a este le estas asignando el valor e.Estado; y más arriba asignas colores dependiendo del mismo estado. Supongo que querías pintar de uno u otro color el registro estado dependiendo de su valor (true/false), así que me aferre a esa intuición para responderte.

Otra cosa, si vas a usar AngularJS, el cual es un Framework poderosísimo, deberías tratar de utilizar sus funcionalidades por completo, por ejemplo usar ng-click en desmedro de onclick que es netamente de Javascript.

Saludos y excelente código colega!

1
  • al principio no me estaba funcionando y despues me di cuenta de las versiones del angularJS, gracias Commented el 2 ago. 2018 a las 14:37
1

Solo te funciona en el primero porque estás creando un conflicto con los "Id". Un Id es un identificador único de un elemento, pero al crear esto, dentro de un ng-repeat estás creando varios botones con el id "btnEstado"

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

Mi sugerencia, utiliza clases en lugar de id

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

Lue el script, lo escribes hasta el final del documento.

Ya quedando todo algo así

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.