Question

带有Kendo自动完成功能的AngularJS表。我使用Kendo自动完成输入从我的数据库和Angular中选择一个资源，以实际将该资源添加到表中。

添加资源时，会有列为其分配使用Kendo datepicker的开始日期和结束日期。出于某种原因，这些日期选择器不起作用。起初，在我添加＆＃34; data-role =＆＃34; datepicker＆＃34;之前，它甚至不像Kendo datepicker那样渲染。对输入。现在，它呈现像一个日期选择器，但日历并没有像它应该的那样下拉，所以我实际上无法选择日期。

如果我使用浏览器控制台手动调用日期选择器，它会复制日历图标，然后月份选择器将起作用。这意味着我无法在每次添加资源时调用日期选择器，或者它将复制已经存在的所有其他日期选择器。

[Dimension in hundredths of an inch] = [Dimension in TWIPS] / 1440.0 * 100

脚本

<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>

调用Kendo Datepicker

<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>

Answer 1

找出问题所在。

我需要一个kendo.directives的依赖项，以便将它们的小部件用于angular。

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

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

Kendo Datepickers无法使用动态Angular表

1 个答案: