使用AngularJS将用户输入存储在数组中,同时增加数组

时间:2019-01-28 23:13:54

标签: arrays angularjs input storage

我正在使用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>

1 个答案:

答案 0 :(得分:0)

关于使用对象将具有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: [] 
}