与 Kendo Grid 数据源和 Angular.js 斗争答案

【问题标题】：Struggling with Kendo Grid datasource and Angular.js与 Kendo Grid 数据源和 Angular.js 斗争
【发布时间】：2015-02-04 05:54:19
【问题描述】：

我试图做一个简单的例子，将新项目添加到剑道网格数据源，但我似乎无法让它工作。该项目已添加到数组中，但网格永远不会更新。这应该是自动的还是我必须拨打电话才能触发更新？

HTML：

<kendo-grid source="people" drop="selectedPeople" groupable="true" sortable="true" columns="columns" pageable="true"></kendo-grid>
<input type="text" ng-model="nameInput">
<input type="number" ng-model="ageInput">
<button ng-click="onAdd()" type="button">Add</button>

JS：

var myApp = angular.module('myApp', []).controller('Tester', ['$scope', Tester]);

myApp.directive('kendoGrid', function() {
    return {
        restrict: 'E',
        replace: true,
        scope:{source:'=source',columns:'=columns',drop:'=drop'},
        template: '<div id="kendogrid"></div>',
        link: function(scope,element,attrs) {
            element.kendoGrid({
                        dataSource: scope.source,
                        groupable: attrs.groupable,
                        sortable: attrs.sortable,
                        pageable: {
                            refresh: true,
                            pageSizes: true
                        },
                        columns: scope.columns
                    });
        }
    };
});



function Tester($scope) {

        $scope.columns = [ {
                                field: "name",
                                width: 90,
                                title: "First Name"
                            } , {
                                field: "age",
                                width: 90,
                                title: "Last Name"
                            } , {
                                field: "id",
                                hidden: true
                            }
                        ];
    var man1 = new Man('name1', 25, 1);
    var man2 = new Man('name2', 28, 2);
    var man3 = new Man('name3', 21, 3);
    var man4 = new Man('name4', 29, 4);
    var man5 = new Man('name5', 22, 5);
    var lastId = 5;
    $scope.onAdd = function(){
        if($scope.nameInput !== "" && $scope.ageInput !== "")
        {
            lastId++;
            var myman = new Man(lastId, $scope.nameInput,$scope.ageInput);
            $scope.people.push(myman);
            alert("Added!");
        }
    }
    $scope.people = [man1, man2, man3];
    $scope.selectedPeople = [man4, man5];
}

function Man(name, age, id) {
    this.id = id;
    this.name = name;
    this.age = age;
}

小提琴： http://jsfiddle.net/yuqorcvL/5/

任何帮助将不胜感激。

【问题讨论】：

标签： angularjs kendo-grid

【解决方案1】：

使用 kendo 可观察数组，它会变魔术！！。

而不是 $scope.people = [man1, man2, man3];

使用这个：

$scope.people = new kendo.data.ObservableArray([man1, man2, man3]);

更新了你的小提琴：JSfiddle

【讨论】：