angularjs - 计算字段未使用 Kendo-UI 网格和 AngularJS 更新

Question

我有一个带有订单线的 kendo-ui 网格。有一个Qty , Price和 Total柱子。总计列计算 ( Qty x Price ) .

对于编辑，我使用自定义弹出窗口显示一些附加信息并让用户更改 Qty和 Price .当他们这样做时，我想要 Total在自定义编辑表单中自动更新。

这是总列的网格列定义:

{
   field: "total",
   title: "Total",
   width: 60,
   template: "#=qty*price#"
}

这是编辑表单中的输入字段:

<input name="total" style="width: 60px" />

这是问题:当我在编辑表单中更改数量或价格时，总计仅在网格中更新(位于弹出编辑表单下方)，但编辑表单中的总计字段不会(它为空)。

作为测试，我把两个 #=total#和 #=qty*price#在编辑表格中；

前者为空

后者是静态数字，它是
表单呈现时的计算

它没有得到更新。

这是一个显示问题的 Plunker:
http://plnkr.co/edit/cZw18btauqb9RPEpd5Kc?p=preview

如何计算编辑表单中的总字段？
(最好使用 Kendo-ui 模板机制或 AngularJS，但 jQuery hack 会作为最后的手段)？

Answer 1

模板不提供双向数据绑定(bind)，因此它们在首次生成后不会自动更新。

您可能希望在数据源架构中为您的模型使用计算字段:

schema: {
    model: {
        id: "itemNo",
        fields: {
            id: {
                type: "string",
                editable: false
            },
            price: {
                type: "number"
            },
            qty: {
                type: "number"
            }
        },
        total: function () {
            return this.get("qty") * this.get("price");
        }
    }
},

( demo)