AngularJs Kendo网格详细模板:基于选定的详细模板行的更新

Question

我正在使用KendoUI AngularJS网格详细模板。我希望能够根据细节模板网格中选定的行更新面板。

我已经正确地连接了on事件，以便从细节模板网格中选择一个值。但是，当我试图更新$scope对象上的变量时，值保持不变(默认值)。

是什么导致#scope对象上的变量不更新？

<div id="example">
<div ng-controller="MyCtrl">
    <kendo-grid options="mainGridOptions">
        <div k-detail-template>
            <kendo-tabstrip>
                <ul>
                    <li class="k-state-active">Orders</li>
                    <li>Contact information</li>
                </ul>
                <div>
                    <div kendo-grid k-options="detailGridOptions(dataItem)"></div>
                </div>
                <div>
                    <ul class="contact-info-form">
                        <li><label>Country:</label> <input class="k-textbox" ng-model="dataItem.Country" /></li>
                        <li><label>City:</label> <input class="k-textbox" ng-model="dataItem.City" /></li>
                        <li><label>Address:</label> {{dataItem.Address}}</li>
                        <li><label>Home phone:</label> {{dataItem.HomePhone}}</li>
                    </ul>
                </div>
            </kendo-tabstrip>
        </div>
    </kendo-grid>

    <div class="panel panel-default">
        <div class="panel-heading">Content</div>
        <div class="panel-body">
            {{content}}
        </div>
    </div>
</div>

​

<script>
angular.module("app", [ "kendo.directives" ])
    .controller("MyCtrl", function ($scope) {
        $scope.content = 'test';
        $scope.mainGridOptions = {
            dataSource: {
                type: "odata",
                transport: {
                    read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
                },
                pageSize: 5,
                serverPaging: true,
                serverSorting: true
            },
            sortable: true,
            selectable: true, 
            pageable: true,
            dataBound: function() {
                this.expandRow(this.tbody.find("tr.k-master-row").first());
            },
            columns: [{
                field: "FirstName",
                title: "First Name",
                width: "120px"
                },{
                field: "LastName",
                title: "Last Name",
                width: "120px"
                },{
                field: "Country",
                width: "120px"
                },{
                field: "City",
                width: "120px"
                },{
                field: "Title"
            }]
        };

        $scope.detailGridOptions = function(dataItem) {
            return {
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                    },
                    schema: {
                        model: {
                            id: "OrderID"
                        }
                    },                        
                    serverPaging: true,
                    serverSorting: true,
                    serverFiltering: true,
                    pageSize: 5,
                    filter: { field: "EmployeeID", operator: "eq", value: dataItem.EmployeeID }
                },
                scrollable: false,
                sortable: true,
                selectable: true,
                change: onChange,
                pageable: true,
                columns: [
                { field: "OrderID", title:"ID", width: "56px" },
                { field: "ShipCountry", title:"Ship Country", width: "110px" },
                { field: "ShipAddress", title:"Ship Address" },
                { field: "ShipName", title: "Ship Name", width: "190px" }
                ]
            };                
        };
        function onChange(arg) {                
            console.log("The selected product id: [" + this.dataItem($(this.select()[0]).closest("tr")).id + "]");
            $scope.content = this.dataItem($(this.select()[0]).closest("tr")).id;
        }
    })

​

我尝试使用在change函数上提供的内联Kendo，如下所示：

<div kendo-grid k-options="detailGridOptions(dataItem)" k-on-change="handleChange(data, dataItem, columns)"></div>

但是，由于数据的skope等是父网格，所以它不能正常工作。

Answer 1

我想出了解决问题的办法

我把selectable: true改成了selectable: "row"。我还将k-on-change="handleChange(data)添加到子网格和父网格，并在$scope上使用以下函数处理更改事件：

 $scope.handleChange = function (data) {
            $scope.data = data;                
        };

它比我最初采用的方法要干净得多，并允许我像这样访问OrderID：{{data.OrderID}}