Проблема с ng-change checkbox в AngularJS (Угловой 1)

Я использую checkbox, который выполняет просьбу AJAX, чтобы менять состояние реестра 1 в 0 и наоборот.

Это код, что renderiza каждый сайт:

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

... и этот соответствующий драйвер:

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

Код работает правильно и реализует просьбу удовлетворительной формы, но когда, по умолчанию загрузив страницу, стоимость checkbox 1, этот не происходит в 0.

Я это показываю с изображением:

introducir la descripción de la imagen aquí

4
задан 29.08.2019, 00:52
1 ответ

Поскольку ты работаешь с одним checkbox, я рекомендую тебе снимать tag ng-false-value и ng-true-value, так как ты нуждаешься в стоимости 0 и 1, типы стоимости, что по умолчанию работает checkbox. Если ты будешь нуждаться в стоимости, отличной от 0, и 1 смоги занимать их.

С другой стороны, если стандартной настройки должно быть 1, я рекомендую тебе работать прямо с ng-model с драйвера. Удалять tag ng-checked и заявлять в драйвере $scope.site.SiteStatus = true;

<input type="checkbox" ng-model="site.SiteStatus" name="svt{{site.SiteId}}" id="svt{{site.SiteId}}" ng-change="status(site)">
1
ответ дан 03.12.2019, 19:18
  • 1
    ng-checked не включает выключатель после того, как инициализирует, если стоимость - 1 ( i.gyazo.com/665b5719897d90312071b1c50ac3ee86.png ). ng-true-value и ng-false-value обусловил их, потому что а стоимость, которая послана из-за ajax, - true и false вместо 1 и 0 – 50l3r 12.11.2016, 17:51
  • 2
    И ng-checked ждет стоимость true или false, не было бы самым легким объявлять $scope.checked = false; и потом if ($scope.site. SiteStatus) $scope.checked = true? – sioesi 12.11.2016, 19:30
  • 3
    Я реализовал то, что ты комментируешь, но проблема происхождения true в false в первой попытке не функционирует. Я только что расширил informació n размещая целый драйвер и код, который повторяется из-за каждого сайта. Нужно говорить, что я подбираю сайты с просьбы ajax. – 50l3r 13.11.2016, 20:54
  • 4
    Я буду проверять это в этих моментах не смогу выполнять код – sioesi 13.11.2016, 20:56