Question

我在angularjs应用程序中有一个视图模型。

function OrderLineViewModel(product, quantity){
    this.name = product.name;
    this.price = product.price;
    this.quantity = quantity;    
    this.total = this.price*this.quantity;
}

我想在我的控制器中使用它并更新总数。

function Ctrl($scope){
    var products = [
        {name: "P1", price: 10.49}, 
        {name: "P2", price: 18.99},
        {name: "P3", price: 14.99}
    ];

    $scope.lines = [];
    $scope.lines.push(new OrderLineViewModel(products[0], 2));
    $scope.lines.push(new OrderLineViewModel(products[1], 3));
    $scope.lines.push(new OrderLineViewModel(products[2], 4));


}

我的HTML就是这样，

<div ng-app="app">
    <div ng-controller="Ctrl">    
        <table>
            <thead>
                <th>Name</th>
                <th>Price</th>
                <th>Quantity</th>
                <th>Total</th>
            </thead>
            <tbody>
                <tr ng-repeat="item in lines">
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td><input type="text" name="input" ng-model="item.quantity"/></td>
                    <td>{{item.total}}</td>
                </tr>                
            </tbody>
        </table>
    </div>
</div>

我的数量位于html输入标记中。当我更改输入值时，total不会更新。我的代码中有错误吗？这是working code。

Answer 1

您需要使总计成为重新计算的函数。

function OrderLineViewModel(product, quantity){
    this.name = product.name;
    this.price = product.price;
    this.quantity = quantity;    
    this.getTotal = function() {
        return this.price*this.quantity;
    }
}

在你的html更新中：

<td>{{item.getTotal()}}</td>

我通常不会宣布模特。我只是从db中获取它。这就是我要解决的问题：

<td>{{item.price*item.quantity}}</td>

但它并不适合你的情况。除非您将值返回给对象。

angularjs viewmodel绑定和更新

1 个答案: