Question

日期选择器工作正常但是当我添加ng-repeat时它停止工作。我如何混合角度和jquery？如果有人有想法善意的建议。我在线添加了所有图书馆。日期选择器工作正常，但当我添加ng-重复它停止工作。我如何混合角度和jquery？如果有人有想法善意的建议。我在线添加了所有图书馆。日期选择器工作正常，但当我添加ng-重复它停止工作。我如何混合角度和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>

Answer 1

要在动态添加的文本框中使用datepicker，请添加以下脚本。

 $(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相同。

Answer 2

问题是你正在使用id。 Ids必须是独一无二的。如果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

Answer 3

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

再次运行datepicker。

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

Answer 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);
                });
            });
        });

为什么jquery datepicker不能在ng-repeat angular js函数中工作

4 个答案: