3

Estoy utilizando un checkbox que ejecuta una petición AJAX para cambiar el estado de un registro de 1 a 0 y viceversa.

Este es el código que renderiza cada sitio:

    <div class="col-xs-12 col-md-3" ng-repeat="site in sites">
        <div class="panel panel-border-color " ng-class="{'panel-border-color-success' : site.SiteStatus == 1, 'panel-border-color-danger' : site.SiteStatus == 0}">
            <div class="panel-heading">

                <div class="pull-right">
                    {{site.SiteStatus}}
                    <div class="switch-button switch-button-lg" ng-class="{'switch-button-success' : site.SiteStatus == 1, 'switch-button-danger' : site.SiteStatus == 0}">
                        <input type="checkbox" ng-checked="SiteChecked[site.SiteId]" ng-model="site.SiteStatus" name="svt{{site.SiteId}}" id="svt{{site.SiteId}}" ng-change="status(site)">
                        <span>
                            <label for="svt{{site.SiteId}}"></label>
                        </span>
                    </div>

                    <button class="btn btn-rounded btn-space  xs-m-0" ui-sref="sitio({SiteId: site.SiteId})" ng-class="{'btn-color btn-evernote' : site.SiteStatus == 1, 'btn-danger' : site.SiteStatus == 0}">
                        <i class="icon icon-left mdi mdi-sign-in"></i> Entrar
                    </button>
                </div>

                {{site.SiteName}}<br><small>{{site.SiteDomain}}</small>
            </div>

            <div class="panel-body">
                <div class="chart-legend">
                    <table>
                        <tbody>
                            <tr>
                                <td class="chart-legend-color"><span data-color="top-sales-color1" style="background-color: rgb(52, 168, 83);"></span></td>
                                <td>Visitas</td>
                                <td class="chart-legend-value">125</td>
                            </tr>
                            <tr>
                                <td class="chart-legend-color"><span data-color="top-sales-color2" style="background-color: rgb(251, 188, 5);"></span></td>
                                <td>Standard Plans</td>
                                <td class="chart-legend-value">1569</td>
                            </tr>
                            <tr>
                                <td class="chart-legend-color"><span data-color="top-sales-color3" style="background-color: rgb(66, 133, 244);"></span></td>
                                <td>Services</td>
                                <td class="chart-legend-value">824</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

... y este el controlador respectivo:

app.controller('SitesController', function($scope, $state, SitesFactory) {
    $scope.StatusErr = "";
    $scope.SiteChecked = [];

    $scope.init = function(){
        SitesFactory.lists().success(function (data) {
            $scope.sites  = data.data;

            angular.forEach($scope.sites, function(site,key){
                console.log(site.SiteStatus)
                if(site.SiteStatus > 0){
                    $scope.SiteChecked[site.SiteId] = true;
                }else{
                    $scope.SiteChecked[site.SiteId] = false;
                }
            });
        }).error(function () {
            console.log('No se encontraron paginas')
        })
    }

    $scope.add = function(){
        SitesFactory.add($scope.SiteName, $scope.SiteDomain).success(function (data) {
            var id = data.SiteId;

            $state.go('sitio',{SiteId : id});
        }).error(function (error) {
            swal("Algo ha ido mal", error.error, "error");
        })
    }

    $scope.status = function(Site){
        var Status = Site ? 1 : 0;
        SitesFactory.status(Site.SiteId, Status).success(function (data) {
            $scope.StatusErr = "switch-button-success";
        }).error(function () {
            $scope.StatusErr = "switch-button-danger";

            swal("Algo ha ido mal", error.error, "error");
        })
    }

    $scope.init();
});

El código se ejecuta correctamente y realiza la petición de forma satisfactoria pero cuando por defecto al cargar la página el valor del checkbox es 1, este no pasa a 0.

Lo muestro con una imagen:

introducir la descripción de la imagen aquí

0

1 respuesta 1

1

Como trabajas con un checkbox te recomiendo que quites el tag ng-false-value y ng-true-value ya que tu necesitas valores 0 y 1, valores que por defecto trabaja un checkbox. Si necesitaras valores distintos de 0 y 1 puede ocuparlos.

Por otro lado si el valor por defecto tiene que ser 1 te recomiendo que trabajes directamente con ng-model desde el controlador. Eliminar el tag ng-checked y declarar en el controlador $scope.site.SiteStatus = true;

<input type="checkbox" ng-model="site.SiteStatus" name="svt{{site.SiteId}}" id="svt{{site.SiteId}}" ng-change="status(site)">
4
  • ng-checked no activa el interruptor al iniciar si el valor es 1 (i.gyazo.com/665b5719897d90312071b1c50ac3ee86.png). ng-true-value y ng-false-value los estipulo porque sino los valores que se envian por ajax son true y false en vez de 1 y 0
    – 50l3r
    el 12 nov. 2016 a las 15:51
  • Y ng-checked espera un valor true o false, no seria lo mas facil declarar $scope.checked = false; y luego if($scope.site.SiteStatus) $scope.checked = true?
    – sioesi
    el 12 nov. 2016 a las 17:30
  • He realizado lo que comentas pero el problema de pasar de true a false en el primer intento no funciona. Acabo de ampliar la información colocando el controlador entero y el codigo que se repite por cada sitio. Cabe decir que los sitios los recojo de una peticion ajax.
    – 50l3r
    el 13 nov. 2016 a las 18:54
  • Voy a revisarlo en estos momentos no puedo ejecutar codigo
    – sioesi
    el 13 nov. 2016 a las 18:56

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.