Kendo 日期选择器不支持动态 Angular table

Question

AngularJS Table 具有 Kendo 自动完成功能。我使用 Kendo 自动完成输入到 select 来自我的数据库的资源，并 Angular 将该资源实际添加到 table.

添加资源后，有一些列可以使用 Kendo 日期选择器为它们分配开始日期和结束日期。出于某种原因，这些日期选择器无法正常工作。起初，它甚至没有像 Kendo 日期选择器一样呈现，直到我将 "data-role="datepicker" 添加到输入中。现在，它像日期选择器一样呈现，但日历不会像它应该的那样下拉，所以我实际上不能 select 约会。

如果我使用浏览器控制台手动调用日期选择器，它会复制日历图标，然后月份选择器就会工作。这意味着我不能让它在每次添加资源时都调用日期选择器，否则它会复制已经存在的所有其他日期选择器。

<table class="table">
    <thead>
    <tr>
        <th><a class="table-sort" href="" ng-click="orderByField='name'; reverseSort = !reverseSort">Name</a></th>
        <th>Start</th>
        <th>End</th>
        <th>Allocation</th>
        <th>Status</th>
        <th></th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="resource in resources | filter:Filter | orderBy:orderByField:reverseSort">
        <td>{{resource.name}}</td>
        <td>
            <div class="datepicker-wrap">
                <input id="start-{{$index}}" value="" kendo-date-picker type="text" class="datepicker" required
                       data-role="datepicker" role="combobox"/>
            </div>
        </td>
        <td>
            <div class="datepicker-wrap">
                <input id="end-{{$index}}" value="" kendo-date-picker type="text" class="datepicker" required
                       data-role="datepicker" role="combobox"/>
            </div>
        </td>
        <td>
            <div class="input-field" style="float: left; min-width: 200px; margin-right:10px;">
                <input type="text" required>
                <span class="highlight"></span>
                <span class="bar"></span>
            </div>
        </td>
        <td>
            <div class="input-wrap">
                <input type="checkbox" id='checkbox-{{$index}}' name='check-group' ng-model="entity.isChecked"
                       ng-change="selectEntity()"/>
                <label for="checkbox-{{$index}}" style="margin:0;"><span>Billable</span></label>
            </div>
        </td>
        <td>
            <button class="delete-row" ng-click="removeRow(resource.name)"><i class="fa fa-times"></i></button>
        </td>
    </tr>
    </tbody>
</table>
<div class="add-resource clearfix">
    <div class="form-group">
        <div class="autocomplete-wrap">
            <input id="Searchlist" placeholder="Resource Name" type="text" name="name" class="autocomplete"
                   ng-model="newresource.name" required>
        </div>
    </div>
    <div style="float: left; position: relative; bottom: 17px; margin-left: 15px;">
        <button class="btn btn-action" ng-click="addresource()" ng-disabled="newresource.verificaDadosresource()">
            <i class="fa fa-plus-circle"></i> Add Resource
        </button>
    </div>
</div>

脚本

<script>
function ResourceController($scope) {
    $scope.resources = listresources();
    $scope.newresource = new resource({});
    $scope.newresource.name = '';

    $scope.addresource = function () {
        $scope.resources.push($scope.newresource);
        $scope.newresource = new resource({});
        $scope.newresource.name = '';
    }
    $scope.clearAll = function (resources) {
        var length = resources.length;
        resources.splice(0, length);
    }

    $scope.removeRow = function (name) {
        var index = -1;
        var comArr = eval($scope.resources);
        for (var i = 0; i < comArr.length; i++) {
            if (comArr[i].name === name) {
                index = i;
                break;
            }
        }
        if (index === -1) {
            alert("Something gone wrong");
        }
        $scope.resources.splice(index, 1);
    };
}

function listresources() {
    var list = [];

    return list;
}

function resource(args) {
    this.name = args.name || undefined;

    this.verificaDadosresource = function () {
        return this.name.length < 1;
    }

    this.verificanameresource = function () {
        return this.name.length < 1;
    }
}
</script>

正在调用 Kendo 日期选择器

$(".datepicker").kendoDatePicker({
    change: kendoDateChange
});

$("#monthpicker").kendoDatePicker({
    // defines the start view
    start: "year",

    // defines when the calendar should return date
    depth: "year",

    // display month and year in the input
    format: "MMMM yyyy"
});

Answer 1

找到问题了。

我需要 kendo.directives 的依赖项才能将他们的小部件与 angular 一起使用。

var app = angular.module("your-angular-app", [ "kendo.directives" ]);

http://docs.telerik.com/kendo-ui/AngularJS/introduction

Kendo 日期选择器不支持动态 Angular table

Kendo Datepickers not working with dynamic Angular table

jquery

kendo-ui

angularjs