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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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