unable to get datepicker to work with ng-repeat

Question

I'm displaying a table row for each item in my $scope.items through an ng-repeat Calling the ng-repeat prevents the jquery-UI datepicker popup from appearing. Though if I remove the ng-repeat, it works but I will only get one row.

Why is this? How can I make it so that for each item in my items array, there's a row in the table with working date pickers. I guess the datepicker() function gets called before the ng-repeat?

I have html that looks like this

<div class="content" ng-controller="tableCtrl"> <div mydirective> </div> </div>

The controller

 app.controller("tableCtrl", function ($scope) { $scope.items = [ "test1", "test2","test3" ]; });

And finally my directive 'mydirective' looks like this

app.directive("mydirective", function () { return { templateUrl: "tables.html" } });

tables.html

 <table> <tr ng-repeat="item in items"> <td> <input type="text" class="datepicker" /> </td> <td> <input type="text" class="datepicker" /> </td> <td> <input type="text" class="datepicker" /> </td> <td> <select> <option>test</option> <option>test</option> </select> </td> </tr> </table> <script> $(".datepicker").datepicker(); </script>

Matt Way · Accepted Answer · 2014-05-17 00:26:46Z

You need to create a custom datepicker directive that runs for each of your repeated elements. Eg (untested):

angular.module('my.directives.datepicker', []) .directive('myDatePicker', ['$timeout', function($timeout){ return { restrict: 'A', link: function(scope, elem, attrs){ // timeout internals are called once directive rendering is complete $timeout(function(){ $(elem).datePicker(); }); } }; }]);

+1 There's also ui-date from the AngularUI team. :) github.com/angular-ui/ui-date

Collectives™ on Stack Overflow

unable to get datepicker to work with ng-repeat

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related