I’m trying to call an array item into a ionic card, the text in the card should adapt when there has been a change in my local storage variable x. This changes when a button is pressed.
Unfortunately all the tutorials I find with the arrays are using ng-repeat which doesn’t work well with ionic cards and the other tutorials are lists that you click then a new page is opened in the existing tab.
I’m looking only to change the text in a card when a button is pressed that changes my counter.
Be great if someone could show me how to adapt the html and app.js to achieve this.
Thx in advance.
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:
<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>