的jQuery的DateTimePicker到動態字段

Question

具有角我克隆我的字段這樣

$scope.edu_rows = [0]; 
var edu_counter = 0; 

$scope.cloneEduRow = function() { 
    edu_counter++; 

    if ($scope.edu_rows.length === 10) 
     alert('Entry limit reached!'); 
    else { 
     $scope.edu_rows.push(edu_counter); 
    } 

}; 

$scope.removeEduRow = function (rowIndex) { 
    $scope.edu_rows.splice(rowIndex, 1); 
}; 

通過NG-重複

<div data-ng-repeat="row in edu_rows"> 
         <div class="col-md-15 form-group row"> 
          <div class="col-sm-3"> 
           <input type="text" class="form-control" name="edu[@{{ $index }}][school]" 
             placeholder="School"> 
          </div> 
          <div class="col-sm-4"> 
           <input type="text" class="form-control" name="edu[@{{ $index }}][teaching]" 
             placeholder="Teaching"> 
          </div> 
          <div class="col-md-2"> 
           <div class="input-group date"> 
            <input type="text" class="form-control" name="edu[@{{ $index }}][start_date]" 
              placeholder="Start Date"> 
            <span class="input-group-addon"> 
             <span class="fa fa-calendar"></span> 
            </span> 
           </div> 
          </div> 
          <div class="col-md-2"> 
           <div class="input-group date"> 
            <input type="text" class="form-control" name="edu[@{{ $index }}][end_date]" 
              placeholder="End Date"> 
            <span class="input-group-addon"> 
             <span class="fa fa-calendar"></span> 
            </span> 
           </div> 
          </div> 
          <a class="btn btn-icon white col-sm-1 pull-right" data-ng-click="removeEduRow($index)"> 
           <i class="fa fa-remove"></i> 
          </a> 
         </div> 
        </div> 

在我的視圖的底部我iniate的DateTimePicker

$(".date").datetimepicker({ 
     viewMode: 'years', 
     format: 'MM/YYYY', 
     icons: { 
      time:  'fa fa-clock-o', 
      date:  'fa fa-calendar', 
      up:  'fa fa-chevron-up', 
      down:  'fa fa-chevron-down', 
      previous: 'fa fa-chevron-left', 
      next:  'fa fa-chevron-right', 
      today: 'fa fa-screenshot', 
      clear: 'fa fa-trash', 
      close: 'fa fa-remove' 
     } 
    }); 

但這隻適用於第一行，添加的行沒有得到插件，我嘗試使用焦點：$(document).on("focus", ".date", function() {

，但沒有工作，把它在我的角度控制器還挺有效，那它就iniates它先前添加的行按下按鈕後，但尚未對當前添加的行。

幫助讚賞。

Answer 1

本工作實施例將幫助你解決你的問題。

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

 
    app.controller('MainCtrl', function ($scope, $timeout) { 
 
     $scope.edu_rows = [0]; 
 
     var edu_counter = 0; 
 

 
     $scope.cloneEduRow = function() { 
 
      edu_counter++; 
 

 
      if ($scope.edu_rows.length === 10) 
 
       alert('Entry limit reached!'); 
 
      else { 
 
       $scope.edu_rows.push(edu_counter); 
 
      } 
 
      $scope.bindDataTimePicker(); 
 
     }; 
 

 
     $scope.removeEduRow = function (rowIndex) { 
 
      $scope.edu_rows.splice(rowIndex, 1); 
 
     }; 
 

 
     $scope.bindDataTimePicker = function() { 
 
      $timeout(function() { 
 
       $(".date").datetimepicker({ 
 
        viewMode: 'years', 
 
        format: 'MM/YYYY', 
 
        icons: { 
 
         time: 'fa fa-clock-o', 
 
         date: 'fa fa-calendar', 
 
         up: 'fa fa-chevron-up', 
 
         down: 'fa fa-chevron-down', 
 
         previous: 'fa fa-chevron-left', 
 
         next: 'fa fa-chevron-right', 
 
         today: 'fa fa-screenshot', 
 
         clear: 'fa fa-trash', 
 
         close: 'fa fa-remove' 
 
        } 
 
       }); 
 
      }, 100); 
 
     } 
 
     $scope.bindDataTimePicker(); 
 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.2/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/css/bootstrap-datetimepicker.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script> 
 
<div ng-app="app1" ng-controller="MainCtrl"> 
 
    <div data-ng-repeat="row in edu_rows"> 
 
     <div class="col-md-15 form-group row"> 
 
      <div class="col-sm-3"> 
 
       <input type="text" class="form-control" name="edu[@{{ $index }}][school]" 
 
         placeholder="School"> 
 
      </div> 
 
      <div class="col-sm-4"> 
 
       <input type="text" class="form-control" name="edu[@{{ $index }}][teaching]" 
 
         placeholder="Teaching"> 
 
      </div> 
 
      <div class="col-md-2"> 
 
       <div class="input-group date"> 
 
        <input type="text" class="form-control" name="edu[@{{ $index }}][start_date]" 
 
          placeholder="Start Date"> 
 
        <span class="input-group-addon"> 
 
         <span class="fa fa-calendar"></span> 
 
        </span> 
 
       </div> 
 
      </div> 
 
      <div class="col-md-2"> 
 
       <div class="input-group date"> 
 
        <input type="text" class="form-control" name="edu[@{{ $index }}][end_date]" 
 
          placeholder="End Date"> 
 
        <span class="input-group-addon"> 
 
         <span class="fa fa-calendar"></span> 
 
        </span> 
 
       </div> 
 
      </div> 
 
      <a class="btn btn-icon white col-sm-1 pull-right" data-ng-click="removeEduRow($index)"> 
 
       <i class="fa fa-remove"></i> 
 
      </a> 
 
     </div> 
 
    </div> 
 
    <button ng-click="cloneEduRow()">Add New</button> 
 
</div>

Answer 2

你xyz.js這樣您可以創建指令：

app.directive("date", function() { 
function link(scope, element, attrs, controller) { 
    // CALL THE "datetimepicker()" METHOD USING THE "element" OBJECT. 

    element.datetimepicker({ 
     format: 'DD-MM-YYYY', // here your need format is used i am just put here 
     icons: { 
      time: "fa fa-clock-o", 
      date: "fa fa-calendar", 
      up: "fa fa-chevron-up", 
      down: "fa fa-chevron-down", 
      previous: 'fa fa-chevron-left', 
      next: 'fa fa-chevron-right', 
      today: 'fa fa-screenshot', 
      clear: 'fa fa-trash', 
      close: 'fa fa-remove' 
     } 
    }).on('dp.change', function (e) { 
     var d = new Date(e.date); 
     var day = d.getDate(); 
     var month = d.getMonth() + 1; 
     var year = d.getFullYear(); 
     scope.$apply(function() { 
      controller.$setViewValue(day + '-' + month + '-' + year); 
     }); 
    }); 
} 

return { 
    require: 'ngModel', 
    link: link 
}; 
}); 

，只是「日期」是給出這樣的文本框中：

<div class="col-md-2"> 
          <div class="input-group"> 
           <input type="text" date class="form-control" name="edu[@{{ $index }}][start_date]" 
             placeholder="Start Date"> 
           <span class="input-group-addon"> 
            <span class="fa fa-calendar"></span> 
           </span> 
          </div> 
         </div>