Javascript 如何在角度数组中创建初始值并在文本框中显示该值？

我正在创建一个带有追加新行函数的表单。我可以动态创建新行，但我的问题是无法在文本框中显示初始值

以下是我的一些代码：

<div class="row" ng-app="product_list">
    <div class="table-responsive" ng-controller="productList">
        <table class="table table-bordered table-hovered">
            <thead>
                <tr>
                    <td class="text-left">Product Name</td>
                    <td class="text-left">Quantity</td>
                    <td class="text-left">Price</td>
                    <td class="text-left">Subtotal</td>
                    <td class="text-center"><button type="button" class="btn btn-default" ng-click="addNewRow()">Add Row</button></td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="value in product.item">
                    <td class="text-left">
                        <input type="text" ng-model="item.name" class="form-control" />
                    </td>
                    <td class="text-center">
                        <input type="number" ng-model="item.quantity" class="form-control" />
                    </td>
                    <td class="text-right">
                        <input type="number" ng-model="item.price" class="form-control text-right" value="{{ value.price }}" />
                    </td>
                    <td>{{ item.price * item.quantity | currency }}</td>
                    <td class="text-center">
                        <button type="button" class="btn btn-danger" ng-click="removeRow($index)">Remove</button>
                    </td>
                </td>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3">
                    <td colspan="3" class="text-left">
                        <label>Subtotal: </label>
                        <input type="text" class="form-control text-right" value="{{ total() | currency }}" readonly />
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>

品名
量
价格
小计
添加行
{{item.price*item.quantity}
去除
小计：

JS：

<script type="text/javascript">

    var appList = angular.module('product_list', []);

    appList.controller('productList', function($scope){

        $scope.product = {
            item: [
            {
                product_name: 'Test name 1',
                quantity: 5,
                price: 99.9,
            }
            ]
        };

        $scope.addNewRow = function() {

            $scope.product.item.push({
                product_name: '',
                quantity: 1,
                price: 0
            });

        }

        $scope.removeRow = function(index) {
            $scope.product.item.splice(index, 1);
        }

        $scope.total = function() {

            var total = 0.00;

            angular.forEach($scope.product.item, function(item){
                total += item.quantity * item.price
            });

            return total;

        }

    });

</script>

var appList=angular.module（'product_list'，[]）；
appList.controller（'productList'，函数（$scope）{
$scope.product={
项目：[
{
产品名称：“测试名称1”，
数量：5，
价格:99.9，
}
]
};
$scope.addNewRow=函数（）{
$scope.product.item.push({
产品名称：“”，
数量：1，
价格:0
});
}
$scope.removeRow=函数（索引）{
$范围.产品.项目.拼接（索引，1）；
}
$scope.total=函数（）{
var总计=0.00；
角度.forEach（$scope.product.item，函数（item）{
合计+=项目数量*项目价格
});
返回总数；
}
});

---

这是plnkr:

您的变量不匹配，在这里您使用

值

作为重复项：

<tr ng-repeat="value in product.item">

另外请注意，在HTML的第44行，如果您的HTML无效，请将

更改为

最后要注意的一点是，在对象中，item变量的名称被称为

product\u name

，但是您将

item.name

分配给

ng model

。因此，还要将第一个文本字段更新为

ng model=item.product\u name

---

这是因为您在ng repeat和ng model中使用了不同的变量名

<tr ng-repeat="value in product.item">

由于您使用ng model=“项目.name”，只需将值替换为项目

像这样

<tr ng-repeat="item in product.item">

好的，它正在工作，谢谢您对我的代码进行了一些更正。到目前为止，我还在学习Angular，有时我会对它的一些功能感到困惑。到目前为止，我需要检查我的变量命名以避免一些错误。：）如果您认为此答案已回答您的问题，请标记为：）是的，我仍需要等待4分钟。：）

<tr ng-repeat="item in product.item">