首页 > 解决方案 > 使用 AngularJS 将用户输入存储在数组中,同时递增所述数组

问题描述

我正在使用 AngularJS 创建一个借/贷计算器来熟悉 AngularJS。我正在尝试将用户输入存储在一个数组中,然后我可以在输入下方的表格中显示该数组。

我希望用户输入特定日期的借方、贷方、日期和用途,并将这些输入中的每一个存储在单独的数组中。因此,理想情况下,第一个输入将存储在:

debit[0];
credit[0];
date[0];
purpose[0]; 

然后用户将保存当天的数据并能够输入所有新数据,同时将先前的数据存储在下面的表格中。

我想我可以将每个数组递增一次,以便将所有数据存储在每个数组的同一索引中,然后在表的每一行调用该特定索引。

    <div ng-app="">

    <table>

        <tr>
            <th>
                <p>Input a debit:</p>
                <input type="number" ng-model="debit">
            </th>
            <th>
                <p>Input a credit:</p>
                <input type="number" ng-model="credit">
            </th>

            <th>
                <p>Date:</p>
                <input type="text" ng-model="date">
            </th>

            <th>
                <p>Purpose:</p>
                <input type="text" ng-model="purpose">
            </th>
        </tr>

    </table>

    <table>

        <tr>
            <th>
                <p>Debit</p>
                <p></p>
                <p id="debit"></p>
            </th>
            <th>
                <p>Credit</p>
                <p>{{ credit }}</p>
            </th>
            <th>
                <p>Date</p>
                <p>{{ date }}</p>
            </th>
            <th>
                <p>Purpose</p>
                <p>{{ purpose }}</p>
            </th>
            <th>
                <p>Balance</p>
                    <div ng-app="">
                        <p>{{ debit - credit }}</p>
                    </div>
            </th>
        </tr>

    </table>

</div>

    <script>
        var debitArray = [];
        document.getElementById("debit").innerHTML = debitArray;
    </script>

标签: arraysangularjsinputstorage

解决方案


使用对象将具有 day 属性的特定用户的所有信息存储为将存储所有信息的对象数组怎么样:

let obj = {
    userId: 1,
    userName: "John",
    userEmail: "john@john.com",
    day: [
            {
            debit: [
                [valueForArrayOfDay0],
                [valueForArrayOfDay0]
            ],
            credit: [],
            date: [],
            purpose: []
            },
            {
            debit: [
                [valueForArrayOfDay1],
                [valueForArrayOfDay1]
            ],
            credit: [],
            date: [],
            purpose: []
            }
        ]
};

如果你console.log(obj.day[0])你会得到这个对象:

{ 
    debit: [ [ 'valueForArrayOfDay0' ], [ 'valueForArrayOfDay0' ] ],
    credit: [],
    date: [],
    purpose: [] 
}

推荐阅读