Daterangepicker更改angularjs

Posted 2023-05-09

【中文标题】Daterangepicker更改angularjs

【英文标题】：Daterangepicker change angularjs

【发布时间】：2017-12-25 20:58:45

【问题描述】：

我有一个日期范围选择器，每次更改值的范围时我都需要添加一个侦听器，因此我将我的 url 中的 startDate 和 endDate 发送到 restapi，然后使用该值对我的数据库进行查询并获取新行。

我的问题在于听众。当我设置新日期时，我需要“onChange”之类的东西。

查看：

<div class="form-group col-md-3 mb0" ng-if="timerange == 'custom'">
                        <div class="row">
                            <label class="col-sm-3 control-label pt7">Custom</label>
                            <div class="col-sm-9">
                                <input type="text" id="customrange" name="customrange" ng-model="parent.customrange" ng-change="applyOptions()" class="form-control" ui-jq="daterangepicker" ui-options="format: 'YYYY/MM/DD',startDate: 'startdate',endDate: 'enddate', maxDate:'enddate'" />                                
                            </div>
                        </div>
                    </div>

控制器：

var rangeSelector = document.getElementsByTagName('select')[1]; //1h 24h 1w custom
if(rangeSelector.value == 'custom')
    var datePicker = document.getElementById("customrange").getAttribute('ui-options');

    var split = datePicker.split(",");  

 var startDate = split[1].split(': ')[1].replace(/["']/g, '');
   var endDate = split[2].split(': ')[1].replace(/["']/g, '');

if (startDate !== undefined) 
    url += '&startDate='+startDate;

if (endDate !== undefined) 
    url += '&endDate='+endDate;

我尝试了 2 个选项，但是当我在其上放置断点时，我无法进入该代码..

$scope.$watch("customrange", function() 
  console.log("I've changed : ");
);

和

rangeSelector.addEventListener("change", function(e)
    if(rangeSelector.value == "custom")
        e.preventDefault();
        customrange = document.getElementById("customrange");
        customrange.addEventListener("change", function()
             startEndDate = controllerScope.getStartEndTimestamps();
        );
      
, false);

有人可以帮帮我吗？

Image of problem

【参考方案1】：

更新：

问题是您的 $watch 没有检查正确的型号。

你的 $watch 应该被如下调用：

$scope.$watch("parent.customrange", function(newValue, oldValue) 
 console.log("I've changed : ");
);

观察对象“父”：

$scope.$watch("parent", function(newValue, oldValue) 
  console.log("I've changed : ");
, true);

true 设置可选的 objectEquality 检查。

Angular $watch Documentation:

当 objectEquality == true 时，watchExpression 的不等式由 angular.equals 函数确定。为了保存对象的值以供以后比较，使用了 angular.copy 函数。因此，这意味着观看复杂的对象会对内存和性能产生不利影响。

【讨论】：

我试过了，当我选择标签时它会显示 console.log.. 当我选择日期并应用时什么都没有发生.. 它不会记录任何内容

尝试观看“parent.customrange”。由于您现在正在观看对象的字段，因此您可以删除“true”。

已更新为正确答案。请选择作为答案。干杯

抱歉，当我按下应用时它只在页面打开时显示警报没有任何反应......

再次查看文档：The listener fn is called asynchronously (via $evalAsync) to initialize the watcher. 这意味着将在加载时调用侦听器逻辑。我看不到应用功能，但请确保它正在更改 parent.customrange 模型。因为这就是我们正在观看的内容