为什么 jquery datepicker 在 ng-repeat angular js 函数中不起作用答案

【问题标题】：why jquery datepicker not working in ng-repeat angular js function为什么 jquery datepicker 在 ng-repeat angular js 函数中不起作用
【发布时间】：2016-02-05 22:56:06
【问题描述】：

日期选择器工作正常，但是当我添加 ng-repeat 时它停止工作。我如何混合 angular 和 jquery ？如果有人有想法请建议。我已经在线添加了所有图书馆。日期选择器工作正常，但是当我添加 ng-repeat 时它停止工作。我如何混合 angular 和 jquery ？如果有人有想法请建议。我已经在线添加了所有图书馆。日期选择器工作正常，但是当我添加 ng-repeat 时它停止工作。我如何混合 angular 和 jquery ？如果有人有想法请建议。我已经在线添加了所有图书馆。

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
       <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
        <script>
          angular.module('App', [])
              .controller('AppCtrl', function ($scope) {

                  $scope.selects = [{}]; // default 1 sets
                    $scope.add = function() 
                          {
                              $scope.selects.push({});
                          }
                    $scope.remove = function(item) 
                          {
                            angular.forEach($scope.selects, function(value, key) 
                           {
                                if (value == item) 
                                {
                                    $scope.selects.splice(key, 1);
                                }
                            });
                        $scope.sdate=$('selecting.sdate').datepicker({
                             minDate:0,
                             onSelect:function(y){
                                 $('selecting.edate').datepicker();
                            $('selecting.edate').datepicker('option','minDate',y);  
                      }


                 });
                 }

            });

        </script>
        </head>

        <body>
        <div ng-app="App">
           <div ng-controller="AppCtrl">
            <form>
            <div ng-repeat="selecting in selects">
               <input id="sdate" ng-model="selecting.sdate">
               <input id="edate" ng-model="selecting.edate">
              <input type="button" value="remove" ng-click="remove(selecting)">
              </div>
              <br><br>
              <input type="button" value="add" ng-click="add()">
            </form>
           </div>  
        </body>
        </html>

【问题讨论】：

我建议您使用专门为 Angular 创建的引导日期选择器
我以前用过，但无法控制像 jquery 一样的 maxdate 函数...你可以给一些建议来控制 datepicker
呃...bootstrap datepicker里面有max和min这样的选项

标签： jquery angularjs datepicker

【解决方案1】：

要在动态添加的文本框上使用日期选择器，请添加以下脚本。

 $(function() {
    $('body').on('focus',".mydatepicker", function(){
    $(this).datepicker();
    });
  });

您的最终 html 需要如下所示。

<div ng-app="App">
   <div ng-controller="AppCtrl">
      <form>
         <div ng-repeat="selecting in selects track by $index">
            <input class="mydatepicker" ng-model="selecting.sdate" >
            <input class="mydatepicker" ng-model="selecting.edate" >
            <input type="button" value="remove" ng-click="remove(selecting)">
         </div>
         <br><br>
         <input type="button" value="add" ng-click="add()">
      </form>
   </div>
</div>

同样的工作JSFiddle。

【讨论】：

【解决方案2】：

问题是您使用的是ids。 ID 必须是唯一的。如果 javascript 或 jquery 确实通过 id 查找元素，它只会选择它找到的第一个元素。

按类识别元素，它将起作用。

<div ng-repeat="selecting in selects">
  <input class="sdate" ng-model="selecting.sdate" datepicker />
  <input class="edate" ng-model="selecting.edate" />
  <input type="button" value="remove" ng-click="remove(selecting)" />
</div>

顺便说一句。在 Angluar 中，最好将所有 DOM/jQuery 操作放在 directive 链接阶段。

.directive('datepicker', function() {
    return function($scope, element) {
      console.log(element);
      element.datepicker({
        minDate: 0,
        onSelect: function(y) {
          var edate = element.siblings('.edate');
          edate.datepicker();
          edate.datepicker('option', 'minDate', element.datepicker( "getDate" ));
        }
      });
    };
});

见plunker

【讨论】：

【解决方案3】：

您可以在页面加载后使用 settimeout。

然后再次运行 datepicker。

setTimeout(function(){
    $( ".sdate" ).datepicker();
    $( ".edate" ).datepicker();
}, 25);

【讨论】：

【解决方案4】：

动态日期选择器指令在 ng-repeat 中使用超时绑定日期。

        $timeout(function () {
            $(ele).datepicker({
                format: 'dd/mm/yyyy',
                language: 'en',
                //endDate: today,
                autoclose: true,
                //maxDate: moment(),                
            }).on('changeDate', function (e) {
                scope.$apply(function () {
                    var date = moment(e.date).format("DD/MM/YYYY");
                    ngModel.$setViewValue(date);
                });
            });
        });

【讨论】：

动态日期选择器指令在 ng-repeat 中使用超时绑定日期。