javascript - 如何在angular js中使用ng-model将文本框值发送到控制器

Question

我想$scope.getPIRData根据文本框值动态刷新该方法，我有一个文本框，我可以在其中给出 3000 毫秒等几秒钟，我需要进入setInterval块，但我的文本框值未设置为window.refreshtime.

方法正在正确刷新，但在选择下拉列表后，刷新机制在选择下拉列表之前不起作用，只有它工作正常。

html

<input type="number"
                   ng-model="refreshtime"
                   ng-model-options="{ updateOn: 'blur' }"
                   ng-change="setupInterval()"
                   id="txtRefresh" name="name" />


<select class="form-control ng-pristine ng-valid ng-scope ng-empty ng-touched" ng-model="sel_val" ng-change="getPIRData(sel_val.deveui)" ng-options="data.details for data in pirs">Select PIR Device</select>

---

Java 脚本

var app = angular.module('PIR_Detection', []);
    app.controller('myCtrl', function ($scope, $http, $window, $timeout) {
        $scope.sel_val = 0;
        $scope.DefaultLabel = "Loading.....";
        $scope.refreshtime = 1000;
        var post = $http({
            method: "get",
            url: "../data.json",
            dataType: 'json',
            data: {},
            headers: { "Content-Type": "application/json" }
        });
        post.success(function (data, status) {
            $scope.pirs = data;
        });
        post.error(function (data, status) {
        });

        $scope.getPIRData = function (id) {
            var url = "/PIRDetails/GetPIRStatus/" + id;
            $http.get(url)
                .then(function (response) {
                    $scope.myWelcome = response.data;
                    if ($scope.myWelcome != "") {
                        $scope.pirstatus = base64toHEX($scope.myWelcome.dataFrame);

                    }
                    $window.deviceId = id;
                })
                // next call will be made after the request
                .finally($scope.setupInterval);
        };

        let timeOut = null;
        $scope.refreshPIR = function () {
            if (timeOut) {
                // removes the previous timeout from event loop
                $timeout.cancel(timeOut);
            }

            console.log('timeout method call at ', $scope.refreshtime, 'ms');

            timeOut = $timeout(function () {
                if ($window.deviceId) {
                    $scope.getPIRData($window.deviceId);
                } else {
                    $scope.refreshPIR();
                }
            }, $scope.refreshtime);
        };

        //init
        $scope.refreshPIR();
    });

标签： javascripthtmlangularjs

Answer 1

使用setTimeoutoversetInterval来获得对执行的更多控制（https://weblogs.asp.net/bleroy/setinterval-is-moderately-evil）。

AngualrJs 具有内置$timeout服务，负责处理摘要周期。

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

app.controller('myCtrl', function ($scope, $http, $window, $timeout) {
    $scope.sel_val = 0;
    $scope.DefaultLabel = "Loading.....";
    $scope.refreshtime = 1000;

    // commenting the data code, just for the solution demo
    /* var post = $http({
        method: "get",
        url: "../data.json",
        dataType: 'json',
        data: {},
        headers: { "Content-Type": "application/json" }
    });
    post.then(function (data, status) {
        $scope.pirs = data;
    });
    post.catch(function (data, status) {
    }); */

    $scope.getPIRData = function (id) {
        var url = "/PIRDetails/GetPIRStatus/" + id;
        $http.get(url)
            .then(function (response) {
                $scope.myWelcome = response.data;
                if ($scope.myWelcome != "") {
                    $scope.pirstatus = base64toHEX($scope.myWelcome.dataFrame);
                }
                $window.deviceId = id;
            })
            // next call will be made after the request
            .finally($scope.refreshPIR);
    };

    let timeOut = null;
    $scope.refreshPIR = function() {
      if(timeOut) {
        // removes the previous timeout from event loop
        $timeout.cancel(timeOut);
      }

      console.log('timeout method call at ',$scope.refreshtime, 'ms');

      timeOut = $timeout(function() {
        if($window.deviceId) {
          $scope.getPIRData($window.deviceId);
        } else {
          $scope.refreshPIR();
        }
      }, $scope.refreshtime);
    };


    //init
    $scope.refreshPIR();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="PIR_Detection" ng-controller="myCtrl">
    Refresh interval: 
  
  <!-- Used ng-model-options to fire the change event once user comes out the textbox-->
  <input type="number" 
  ng-model="refreshtime" 
  ng-model-options="{ updateOn: 'blur' }" 
  ng-change="refreshPIR()" 
  id="txtRefresh" name="name"/>
  
</div>