Angularjs update variable on ng-change

Question

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()">{{ value.text }}</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()">{{ value.text }}</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);

}

Why do you need to loop through all of them when one changes? — charlietfl
– charlietfl, Commented Apr 21, 2017 at 21:54
@charlietfl because I want to set the text values from each array to a var to send them to the db as a single string. checkedData is storing these values — madsongr
– madsongr, Commented Apr 22, 2017 at 20:54
when? when each change occurs? Also easier to use Array#map() and join() to create that string — charlietfl
– charlietfl, Commented Apr 22, 2017 at 20:59
@charlietfl yes, I noticed. I am using $watch to build the string like in this fiddle (jsfiddle.net/d3ruexuv/1) but I cannot get the var outside the function. — madsongr
– madsongr, Commented Apr 24, 2017 at 19:29

couzzi · Accepted Answer · 2017-04-25 18:04:21Z

2

Using the ng-change directive on your input will allow you run some operations on your $scope.db object.

Basically, when a change from true to false occurs (or the other way around), the function will run and determine if the new value is true. If it is, it gets push'd into a new array called $scope.filteredDatabases.

If the new value is false, it is removed from $scope.filteredDatabases.

The last bit is simply running a join operation on the $scope.filteredDatabases array, in this case, joining with a comma.

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $filter) {


 $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.filteredDatabases = [];

  $scope.notifyChange = function(item) {
    if (!!item.checked){
       $scope.filteredDatabases.push(item.text);
    }
    else {
      var index = $scope.filteredDatabases.indexOf(item);
      $scope.filteredDatabases.splice(index, 1);
    }
    
     $scope.filteredString = $scope.filteredDatabases.join(',');
  };




});

label {
  display: block;
}

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">

  <form class="list">

    <label ng-repeat="option in db">
      <input type="checkbox" ng-model="option.checked" ng-change="notifyChange(option)"/> {{option.text}}

    </label>
  </form>
  <hr />
  <pre>{{filteredString}}</pre> 
</body>

</html>

Plunker mirror: http://plnkr.co/edit/NqFGoaxnAT016b37Js2a?p=preview

edited Apr 25, 2017 at 18:04

answered Apr 21, 2017 at 22:08

couzzi

6,3563 gold badges26 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

madsongr Over a year ago

Yes, I have seen this before. But how would you build a string with each text value if checked: true? And if checked: true would turn into false, how would you remove the corresponding text value from this string?

madsongr Over a year ago

Good. I think we checked the same fiddle. My final code is a little different but thanks a lot!

madsongr · Accepted Answer · 2017-04-25 19:36:46Z

I made some changes based on this fiddle and this is another way to build the string.

<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="option in db" ng-model="option.checked" ng-checked="option.checked" ng-change="checkChanges()">{{ option.text }}</ion-checkbox>
  </ion-list>
  <div class="spacer" style="height: 10px;"></div>

controller

$scope.checkChanges = function(){

    var finalString = "";
    for(var i = 0; i < $scope.db.length; i++){
        if($scope.db[i].checked === true){
            finalString += $scope.db[i].text + ', ';
        }
    }

    finalString = finalString.substring(0, finalString.length - 2);
    console.log("soma: "+finalString);

};

With this way var finalString must be inside ng-change function and it can be used outside the function using localStorage.setItem/localStorage.getItem, for example.

Collectives™ on Stack Overflow

Angularjs update variable on ng-change

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related