如何对同一页面中的三个不同字段使用 ng-change 函数,这些字段不属于循环调用



我在同一页面中分别有三个角度时刻日期选择器字段,一个日期选择器字段,一个月选择器和一个年份选择器字段,如下所示

<input class="form-control" placeholder="BY DAY" ng-model="date" moment-picker="gDate" start-view="month" format="MM/DD/YYYY" today="true" ng-model-options="{ updateOn: 'blur' }" change="getData('day')" />
<input class="form-control" placeholder="BY MONTH" ng-model="month" moment-picker="gMonth" format="MM/YYYY" ng-model-options="{ updateOn: 'blur' }" change="getData('month')" />
<input class="form-control" placeholder="BY YEAR" ng-model="year" moment-picker="gYear" format="YYYY" ng-model-options="{ updateOn: 'blur' }" change="getData('year')" />

角度函数为

        $scope.getData = function (Level) {
            var dateRange = "";
            if (Level == 'day') {
                if ($scope.date != "") {
                    var Value = $scope.date;
                    var localTime = moment.utc(Value).toDate();
                    localTime = moment(localTime).format('YYYY-MM-DD HH:mm:ss');
                    dateRange = new Date(localTime);
                }
                $scope.month = "";
                //$scope.gMonth = "";
                $scope.year = "";
                //$scope.gYear = "";
            } else if (Level == 'month') {
                var Value = $scope.month;
                var localTime = moment.utc(Value).toDate();
                localTime = moment(localTime).format('YYYY-MM-DD HH:mm:ss');
                dateRange = new Date(localTime);
                //$scope.gYear = "";
                //$scope.gDate = "";
                $scope.date = "";
                $scope.year = "";
            } else {
                var Value = $scope.year;
                var localTime = moment.utc(Value).toDate();
                localTime = moment(localTime).format('YYYY-MM-DD HH:mm:ss');
                dateRange = new Date(localTime);
                //$scope.gDate = "";
                //$scope.gMonth = "";
                $scope.date = "";
                $scope.month = "";
            }
            if (dateRange != "" || dateRange != undefined) {
                searchService.getDataFromDb(Level, dateRange).then(function (result) {
                //process result
                })
            }
        }

我想做的是当我选择日期时,应该清除月份和年份字段。但是发生的情况是,"日"循环中月份和年份的清除将触发ng-change,然后它将同时运行getData("月"(和getData("年"(,因此无法获得预期数据。此外,所选值未显示在相应的文本字段中

我尝试了以下函数而不是文本字段中的 getData(( 函数

$scope.checkForDateType = function () {
    if ($scope.date != "") {
            $scope.getData('day');
    }
    if ($scope.month != "") {
            $scope.getData('month');
    }
    if ($scope.year != "") {
            $scope.getData('year');
    }
}

但结果是一样的..请帮助我获取正确的数据并在相应的文本字段中显示所选值

我找到了解决方案。设置一个全局变量并分配日期类型,并在函数中检查它的所有部分。

$scope.setGlobal = function (from) {
    $scope.globelDateType = from;
}
$scope.getData = function (Level) {
    var dateRange = "";
    if ($scope.globelDateType == "") {
        $scope.setGlobal(Level);   //new change
    } else {
        return false;
    }
    if (Level == 'day') {
       if ($scope.date != "") {
           var Value = $scope.date;
            var localTime = moment.utc(Value).toDate();
            localTime = moment(localTime).format('YYYY-MM-DD HH:mm:ss');
            dateRange = new Date(localTime);
       }else {
           $scope.setGlobal("");  //new change
           return false;
       }
        $scope.month = "";
        $scope.year = "";
    } else if (Level == 'month') {
        if ($scope.month == "") {
           $scope.setGlobal(""); //new change
           return false;
        }
        var Value = $scope.month;
        var localTime = moment.utc(Value).toDate();
        localTime = moment(localTime).format('YYYY-MM-DD HH:mm:ss');
        dateRange = new Date(localTime);
        $scope.date = "";
        $scope.year = "";
     } else {
        if ($scope.year == "") {
           $scope.setGlobal("");    //new change
           return false;
        }
        var Value = $scope.year;
        var localTime = moment.utc(Value).toDate();
        localTime = moment(localTime).format('YYYY-MM-DD HH:mm:ss');
        dateRange = new Date(localTime);
        $scope.date = "";
        $scope.month = "";
     }
     if (dateRange != "" || dateRange != undefined) {
         searchService.getDataFromDb(Level, dateRange).then(function (result) {
            //process result
            })
     }
     $scope.setGlobal(""); //new change
}

如果任何回调有效,则仅通过$scope.setGlobal((函数设置全局变量。这个全局变量和 ng-model 值决定应该执行哪个循环以及相应的循环执行,所有其他方法将产生 false 条件。

最新更新