CODEWITHSUNDEEP
javascriptjqueryangularjs
monkeyWithAMachinegun
monkeyWithAMachinegun

Reputation: 331

Angularjs checkbox ng-model changing values inside controller dynamically

I've got a page where basically it loads data from the database and displays it in a grid - it will refresh the data if you click a button, but there's also a checkbox which will cause it to refresh automatically. Here is the HTML code:

 <div id="TestViewTable" ng-controller="testTableManager" ng-init="loadTableData()">
    <div><h3>Test Status</h3>
        Search: <input placeholder="Search..." type="text" ng-model="TestViewTableGrid.quickFilterText"/>
        <button id="refresh" ng-click="loadTableData()">Refresh</button>
        <input type="checkbox" ng-model="automaticRefreshFlag">Auto Refresh</input>
            <div ag-grid="TestViewTableGrid" style="width: 1200px;height: 400px;" class="ag-fresh"></div>
            <div >row(s): {{rowCount}}</div>
            <h3>Test Status Output:</h3>
            <textarea rows="100" id="consoleOutput"
                    style="max-height:500px;min-height:200px;width: 1200px;resize: none">
                    {{selectedRowOutput}}
            </textarea>
            <link id=lastOutputComp></link>
        </div>  
    </div>

Inside the controller, I init the value to false:

 angular.module('trmApp').controller('testTableManager', function($scope, $http, $timeout, $mdDialog, $mdMedia,  $interval) {

$scope.automaticRefreshFlag = false;

Then, using $interval, I watch it and refresh the data based on how it's set:

    $interval(function(){ $scope.reload(); }, 10000);
$scope.reload = function() {
    if($scope.automaticRefreshFlag) {
        console.log("Automatic Refresh Enabled")
        $scope.loadTableData();
    } else {
        console.log("Automatic Refresh Disabled")
    }
};

The problem is that when it runs, in the console I see that the value is toggling back and forth between true and false without any input from the user:

>Automatic Refresh Disabled
>TestViewTable.js:185 Automatic Refresh Disabled
>TestViewTable.js:185 Automatic Refresh Disabled
>TestViewTable.js:182 Automatic Refresh Enabled

Does anyone know what I'm doing wrong? Thanks!

Upvotes: 0

Views: 351

Answers (1)

Arjun
Arjun

Reputation: 56

Angularjs sometimes fails to track a primitive type variable assigned to the $scope. So you better create an object and set the automaticRefreshFlag property as a property of the object and use that instead. 

angular.module('trmApp').controller('testTableManager', function($scope, $http, $timeout, $mdDialog, $mdMedia,  $interval) { 
$scope.flag = {}; 
$scope.flag.automaticRefreshFlag = false;

and for the html part, use

 <input type="checkbox" ng-model="flag.automaticRefreshFlag">Auto Refresh</input>

Then change the controller as

$interval(function(){ $scope.reload(); }, 10000);
$scope.reload = function() {
    if($scope.flag.automaticRefreshFlag) {
        console.log("Automatic Refresh Enabled")
        $scope.loadTableData();
    } else {
        console.log("Automatic Refresh Disabled")
    }
};

Try this. This will fix your issue.

Upvotes: 0

Related Questions