vendredi 21 avril 2017

Angularjs update variable on ng-change

I have two groups of checkboxes where values are set to a variable to save it to the database as a string.

How can I "update" this variable if I come back to checkboxes page and check/uncheck them?

I tried with ng-change but the firsts checked values repeat on every check click or all the values are removed on uncheck click and I get NaN on console.log

<form class="list">

    <ion-toggle toggle-class="toggle-balanced" ng-model="data.turnOnOff" ng-true-value="'On'" ng-false-value="'Off'" ng-change="data.openDatabases(data.turnOnOff)">Databases</ion-toggle>
    <div class="spacer" style="height: 10px;"></div>

    <ion-list ng-show="bd">
        <ion-checkbox ng-repeat="(key, value) in db" ng-model=value.checked ng-change="data.checkChanges()"></ion-checkbox>
    </ion-list>
    <div class="spacer" style="height: 10px;"></div>


    <ion-toggle toggle-class="toggle-balanced" ng-model="data.escritorio" ng-true-value="'On'" ng-false-value="'Off'" ng-change="data.openEscritorio(data.escritorio)">Office</ion-toggle>
    <div class="spacer" style="height: 10px;"></div>

    <ion-list ng-show="officee">
        <ion-checkbox ng-repeat="(key, value) in office" ng-model=value.checked ng-change="data.checkChanges()"></ion-checkbox>
    </ion-list>
</form>

controler

var checkedData = [];
var getResults = [];

$scope.data = {};

$scope.db = [
    {text:'Firebird', checked:'false'}, 
    {text:'MongoDB', checked:'false'}, 
    {text:'mSQL', checked:'false'}, 
    {text:'MySQL', checked:'false'}, 
    {text:'Oracle', checked:'false'}, 
    {text:'PostgreSQL', checked:'false'}, 
    {text:'TinySQL', checked:'false'}, 
    {text:'SQLite', checked:'false'}, 
    {text:'SQL Server', checked:'false'}, 
    {text:'Sybase', checked:'false'}, 
    {text:'Outros', checked:'false'}
]

$scope.office = [
    {text:'Microsoft Access', checked:'false'}, 
    {text:'Microsoft Excel', checked:'false'}, 
    {text:'Microsoft Outlook', checked:'false'}, 
    {text:'Microsoft PowerPoint', checked:'false'}, 
    {text:'Microsoft Word', checked:'false'}, 
    {text:'Open Office', checked:'false'}
]

$scope.data.checkChanges = function(){

    angular.forEach($scope.db, function(key, value){
        if(key.checked == true){
            //checkedData.push(key.text);

            checkedData += key.text + ', ';

        }else if(key.checked == false){

            checkedData -= key.text + ', ';

        }
    });

    angular.forEach($scope.office, function(key, value){
        if(key.checked == true){

            checkedData += key.text + ', ';

        }else if(key.checked == false){

            checkedData -= key.text + ', ';

        }
    });

    //checkedData = checkedData.substring(0, checkedData.length - 2);
    console.log("result: "+checkedData);

}




Aucun commentaire:

Enregistrer un commentaire