Problem with ng-change checkbox in Angular

4

I am using a checkbox that executes an AJAX request to change the state of a record from 1 to 0 and vice versa.

This is the code that renders each site:

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

... and this the respective driver:

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();
});

The code executes correctly and performs the request satisfactorily, but when the page is loaded by default the value of the checkbox is 1 , it does not change to 0 .

I show it with an image:

    
asked by 50l3r 07.11.2016 в 00:58
source

1 answer

1

Since you work with a checkbox I recommend that you remove the tag ng-false-value and ng-true-value since you need values 0 and 1 , values that by default a checkbox works. If you need values other than 0 and 1 you can occupy them.

On the other hand if the default value has to be 1 I recommend that you work directly with ng-model from the controller. Remove the tag ng-checked and declare in the controller $scope.site.SiteStatus = true;

<input type="checkbox" ng-model="site.SiteStatus" name="svt{{site.SiteId}}" id="svt{{site.SiteId}}" ng-change="status(site)">
    
answered by 07.11.2016 в 01:14