Question

我的localStorage发生了一些奇怪的事情。数据保存在我的localStorage中，但从不以ng-repeat显示。但是，当数据少于2个项目时，在这种情况下，它会显示在屏幕上。当它大于2时，它不会显示。这是我的控制器代码

$scope.saved = localStorage.getItem('todos');

if($scope.saved != null ) {
    $scope.invoice = { items: JSON.parse($scope.saved) };
} else {
    $scope.invoice = { `enter code here`
        items : [{
        qty: 10,
        description: 'item',
        cost: 9.95}]
    };
}

这是我的附加代码：

$scope.addItem = function(x) {
    $scope.invoice.push({
        qty: 1,
        description: x.cakename,
        cost: x.id
    });
    localStorage.clear();
    localStorage.setItem('todos', JSON.stringify($scope.invoice));
};

这是表格代码：

<div>
    <table class="table" style="margin-top:50px">
        <tr>
            <th>Name</th>
            <th>Qty</th>
            <th>Cost</th>
            <th>Total</th>
            <th></th>
        </tr>
        <tr ng-repeat="item in invoice">
            <th>@{{ item.description }}</th>
            <th>@{{ item.qty }}</th>
            <th>@{{ item.cost }}</th>
            <th>@{{ item.qty * item.cost }}</th>
            <td>[<a href ng:click="removeItem($index)">X</a>]</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td>Total:</td>
            <td> @{{ total() | currency }} </td>
        </tr>
    </table>

    <a href="#/checkout" class="btn btn-danger">
        Checkout <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
    </a>
</div>

当只有2个项目并且我刷新时，屏幕显示，

Name          Qty    Cost   Total   
Black Forest   1      1      1    [X]
Berry          1      2      2    [X]
          Total:    $3.00
Checkout

否则，显示

Name    Qty Cost    Total   
Total:  $7.00

总数为7 ..数据仍然存在但未显示。

Answer 1

您stringify整个invoice对象，但当您从本地存储中读回时，您parse将其转换为具有不同结构的对象。

请尝试$scope.invoice = JSON.parse($scope.saved)。

Answer 2

我解决了我的问题。这是因为数组中的重复键。禁止重复键，因为AngularJS使用键将DOM节点与项目关联。所以添加这个就可以了。

ng-repeat =＆＃34;发票跟踪中的项目由$ index＆＃34;

组成

我这么傻！

Ng-repeat不适用于localStorage

2 个答案: