JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.12/css/ionic.css">
<div ng-app="homeApp">
<div ng-controller="CartCtrl">
<ul class="list">
<li class="item item-button-right" ng-repeat="item in mycart">{{ item.Name }}: ${{ item.Price }}
<button class="button button-negative" ng-click="removeFromCart(item)"> <span style="font-variant: small-caps; margin-top: -4px">remove</span>
</button>
</li>
</ul>
<button class="button button-block button-balanced" ng-click="addItem()">Add some item to cart (for testing)</button>
<button class="button button-block button-balanced" ng-click="getCart()">Manually get cart from service</button>
</div>
</div>
JavaScript
var homeApp = angular.module('homeApp', []);
homeApp.factory("cartService", function ($rootScope) {
var cart = [];
var service = {
all: function () {
return cart;
},
add: function (item) {
cart.push(item);
},
remove: function (item) {
cart.splice(cart.indexOf(item), 1);
},
cartUpdated: function (newValue) {
cart = newValue;
}
}
setInterval(function () {
$rootScope.$apply(function () {
var newcart = [{
"Id": 4,
"Name": "Some item " + Math.random(),
"Price": 4
}];
cart = newcart;
});
}, 3000);
return service;
});
homeApp.controller('CartCtrl', function ($scope, $timeout, cartService) {
var init = function () {
$scope.mycart = cartService.all();
}
$scope.getCart = function () {
$scope.mycart = cartService.all();
}
$scope.addItem = function () {
cartService.add({
"Id": 4,
"Name": "Some item",
"Price": 4
});
}
$scope.removeFromCart = function (item) {
cartService.remove(item);
}
init();
});