Question

我有一个页面，基本上它从数据库加载数据并将其显示在网格中 - 如果你点击一个按钮它会刷新数据，但是还有一个复选框会导致它自动刷新。这是HTML代码：

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

在控制器内部，我将值初始化为false：

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

$scope.automaticRefreshFlag = false;

然后，使用$ interval，我观察它并根据它的设置刷新数据：

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

问题在于，当它运行时，在控制台中我看到该值在true和false之间来回切换而没有来自用户的任何输入：

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

有谁知道我做错了什么？谢谢！

Answer 1

Angularjs有时无法跟踪分配给$ scope的基本类型变量。因此，您最好创建一个对象并将automaticRefreshFlag属性设置为对象的属性并使用它。

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

对于html部分，请使用

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

然后将控制器更改为

$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")
    }
};

试试这个。这将解决您的问题。

Angularjs checkbox ng-model动态更改控制器内的值

1 个答案: