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

前端之家收集整理的这篇文章主要介绍了计算字段未使用Kendo-UI网格和AngularJS进行更新前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个带有订单行的kendo-ui网格.有一个数量,价格和总数列.计算总列数(数量x价格).

为了进行编辑,我使用自定义弹出窗口显示一些附加信息,并允许用户更改数量和价格.当他们这样做时,我希望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会作为最后的手段)?

解决方法

模板不提供双向数据绑定,因此它们在首次生成后不会自动更新.

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

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)

猜你在找的Angularjs相关文章