Javascript 使用ng repeat的表格中的数据将从页面中消失

我创建了以下网站：

我在页面最底部有以下支出明细表代码：

<section id="Details">
        <h2>Spending Details</h2>
        <br />
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Expense</th>
                    <th>Category</th>
                    <th>Amount</th>
                </tr>
            </thead>
            <tbody>
                <tr data-ng-repeat="expense in expenses | orderBy: 'date'">
                    <td>{{ expense.date }}</td>
                    <td>{{ expense.text }}</td>
                    <td>{{ expense.category }}</td>
                    <td>{{ expense.amount > 0 ? '$' : ''}}{{ expense.amount }}</td>
                </tr>
            </tbody>
        </table>
    </section>

function ExpenseController($scope) {
$scope.appTitle = "Expense App using Angular";
$scope.saved = localStorage.getItem('expenses');
$scope.expenses = (localStorage.getItem('expenses') !== null) ? JSON.parse($scope.saved) : [];
localStorage.setItem('expenses', JSON.stringify($scope.expenses));

$scope.addExpense = function () {
    $scope.expenses.push({
        text: $scope.expenseText,
        category: $scope.categoryText,
        amount: $scope.amountText,
        date: $scope.dateText
    });
    $scope.expenseText = '';
    $scope.categoryText = '';
    $scope.amountText = '';
    $scope.dateText = '';
    localStorage.setItem('expenses', JSON.stringify($scope.expenses));
};

$scope.countExpenses = function () {
    var count = 0;
    angular.forEach($scope.expenses, function (expense) {
        count += 1;
    });
    return count;
};

$scope.totalAmountByCategory = function (category) {
    var sum = 0;
    angular.forEach($scope.expenses, function (expense) {
        sum += expense.category == category ? parseFloat(expense.amount) : 0;
    });
    return sum;
};

$scope.totalAmount = function () {
    var sum = 0;
    angular.forEach($scope.expenses, function (expense) {
        sum += expense.amount > 0 ? parseFloat(expense.amount) : 0;
    });
    return sum;
};}

支出明细


日期
费用
类别
数量
{{expense.date}
{{expense.text}
{{expense.category}
{{expense.amount>0？'$'：''}{{{expense.amount}}
功能费用控制器（$scope）{
$scope.appTitle=“使用角度的费用应用程序”；
$scope.saved=localStorage.getItem（“费用”）；
$scope.expenses=（localStorage.getItem（'expenses'）！==null）？JSON.parse（$scope.saved）：[]；
setItem（'expenses'，JSON.stringify（$scope.expenses））；
$scope.addExpense=函数（）{
$scope.expenses.push({
text:$scope.expenseText，
类别：$scope.categoryText，
金额：$scope.amountText，
日期：$scope.dateText
});
$scope.expenseText=''；
$scope.categoryText=''；
$scope.amountText=''；
$scope.dateText=''；
setItem（'expenses'，JSON.stringify（$scope.expenses））；
};
$scope.countExpenses=函数（）{
var计数=0；
角度。forEach（$scope.expenses，function（expense）{
计数+=1；
});
返回计数；
};
$scope.totalAmountByCategory=函数（类别）{
var总和=0；
角度。forEach（$scope.expenses，function（expense）{
总和+=费用.类别==类别？浮动（费用.金额）：0；
});
回报金额；
};
$scope.totalAmount=函数（）{
var总和=0；
角度。forEach（$scope.expenses，function（expense）{
总和+=费用金额>0？浮动（费用金额）：0；
});
回报金额；
};}

输入一两个费用后，等待几分钟，然后刷新页面，底部表格中的数据消失，但仍反映在类别表和图表中。我在浏览器中检查了本地存储，费用对象仍然存在

你知道为什么这些值会从下面的表中消失吗

---

谢谢

…等待几分钟，然后刷新页面？你是说有时初始化时没有加载数据吗？你也可以发布控制器代码吗？在其中获取控制器加载上的所有数据？如何从localStorage反映/获取数据？每当我第一次加载页面并单击“添加”按钮时，费用都会按预期添加到支出明细表和类别表中。如果我刷新页面，图表和类别表将保持不变，并具有正确的数据。支出明细表为空。当我尝试添加新费用时，新费用不会显示在底部表格中。我已添加控制器代码…请稍等几分钟，然后刷新页面？你是说有时初始化时没有加载数据吗？你也可以发布控制器代码吗？在其中获取控制器加载上的所有数据？如何从localStorage反映/获取数据？每当我第一次加载页面并单击“添加”按钮时，费用都会按预期添加到支出明细表和类别表中。如果我刷新页面，图表和类别表将保持不变，并具有正确的数据。支出明细表为空。当我尝试添加新费用时，新费用不会显示在底部表格中。我已添加了控制器代码。