Question

我是AngularJS的新手，我试图创建一个简单的发票系统有问题。问题是显示产品成本（ng-model：item.cost）的输入字段没有填充值，具体取决于我在选择框中做出的选择。

HTML：

 <div ng-controller="CartForm">
    <table class="table">
        <tr>

            <th>Description</th>
            <th>Qty</th>
            <th>Cost</th>
            <th>Total</th>
            <th></th>
        </tr>
        <tr ng-repeat="item in invoice.items" ng-controller="ProductController as productCtrl">
            <td><select ng-model="selectedItem" ng-options="product.name for product in productCtrl.products">
            </select></td>
            <td><input type="number" ng-model="item.qty" ng-required class="input-mini"></td>
            <td><input ng-model="item.cost" value="{{selectedItem.price}}"></td>
            <td>€{{item.qty * selectedItem.price}}</td>
            <td>
                [<a href ng-click="removeItem($index)">X</a>]
            </td>
        </tr>
        <tr>
            <td><a href ng-click="addItem()" class="btn btn-small">add item</a></td>
            <td></td>
            <td>Total:</td>
            <td>€{{total()}}</td>
        </tr>
    </table>
</div>

app.js：

 app.controller('CartForm',function($scope) {
    $scope.invoice = {
        items: []
    };

    $scope.addItem = function() {
        $scope.invoice.items.push({
            qty: 1,
            description: '',
            cost: 0
        });
    },

        $scope.removeItem = function(index) {
            $scope.invoice.items.splice(index, 1);
        },

        $scope.total = function() {
            var total = 0;
            angular.forEach($scope.invoice.items, function(item) {
                total += item.qty * item.cost;
            })


            return total;
        }

});

Answer 1

您正试图设置文本框的value，因为ng-model：value="{{selectedItem.price}}"而无效，item.cost似乎没有包含任何价值。

为此，您可以使用ng-change元素上的select设置item.cost = selectedItem.price，如下所示：

    <tr ng-repeat="item in invoice.items" ng-controller="ProductController as productCtrl">
        <td><select ng-model="selectedItem" 
                    ng-change="item.cost = selectedItem.price"
                    ng-options="product.name for product in productCtrl.products">
        </select></td>
        <td><input type="number" ng-model="item.qty" ng-required class="input-mini"></td>
        <td><input ng-model="item.cost" /></td>
        <td>€{{item.qty * selectedItem.price}}</td>
        <td>
            [<a href ng-click="removeItem($index)">X</a>]
        </td>
    </tr>

Answer 2

我的代码中没有看到{{item.cost}}，应该在某处声明...

angularjs输入字段不显示ng-model值

2 个答案: