Angularjs 使用带有本地存储指针的阵列更改ionic v1卡的详细信息

我试图将一个数组项调用到ionic卡中，当本地存储变量x发生变化时，卡中的文本应该适应。当按下按钮时，情况会发生变化。 不幸的是，我找到的所有关于阵列的教程都使用了ng repeat，这在爱奥尼亚卡上不太管用，其他教程都是列表，单击后在现有选项卡中打开一个新页面。 我只想在按下改变计数器的按钮时改变卡片上的文字

如果有人能告诉我如何调整html和app.js来实现这一点，那就太好了

Thx提前

app.js

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngStorage'])

.controller('Ctrl', function($scope, $localStorage) 
{
    var Abby = [
                { id: 0, name: 'Hello' },
                { id: 1, name: 'Hello 2' },
                { id: 2, name: 'Hello 3' },
                { id: 3, name: 'Hello 4' }
               ];

    $scope.$storage = $localStorage.$default({
        x: 42

    });
    $scope.deleteX = function() {
      delete $localStorage.x;
    };
    $scope.deleteY = function() {
      delete $localStorage.y;
    };
})
`

Html:

`
{{$storage.x}{{$storage.y}

清除x |清除y
{{$Abby.{{$storage.x}}
`

`
<ion-content class="padding" >


   <div ng-controller="Ctrl">
        <button ng-click="$storage.x = $storage.x + 1">{{$storage.x}}</button> <button ng-click="$storage.y = $storage.y + 1">{{$storage.y}}</button> 
        <p></p>
        <button ng-click="deleteX()">Clear x</button> | <button ng-click="deleteY()">Clear y</button>
        <img src="./img/ionic{{$storage.x}}.png">
        <div class="card">
            <div class="item item-body">

            {{$Abby.{{$storage.x}}}}

            </div>
        </div>
    </div>
</ion-content>
`