AngularJS Example

by Preexo

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script src="http://code.angularjs.org/1.0.2/angular-resource.min.js"></script>
<script type="text/javascript">
    var items = [
      {"item_id":1, "quantity":1, "name":"marmelade"},
      {"item_id":2, "quantity":2, "name":"spielzeug"}, 
      {"item_id":3, "quantity":3, "name":"werkzeug"},
    ];
</script>

<div ng-app="Cart" ng-controller="Ctrl">
    <ul ng-init="getMyItems()">
        <li>hgfjhfjhg</li>
        <li ng-repeat="item in items">
            {{item.name}} 
            <button ng-click="remove($index)">delete</button>
            <input type="text" ng-model="item.quantity" ng-change="change($index)">
        </li>
    </ul>
    {{items}}
</div>

JavaScript

/**
 Warenkorb für Shopingo mit Angular
 **/
angular.module('Cart', ['ngResource']);


function Ctrl($scope, $resource) {

    $scope.items = [];

    $scope.getMyItems = function() {
        console.debug(items);
        $scope.items = items;
        if (!$scope.$$phase) {
            $scope.$apply();
        }
    };

    $scope.remove = function(artIndex) {
        $scope.items.splice(artIndex, 1);
    };

    $scope.re = $resource('/', {
        callback: 'JSON_CALLBACK'
        }, {
        'updateCart': {
            method: 'POST',
            headers: {
                'module': 'Shop',
                'mod_id': '1',
                'event': 'updateCart'
            }
        }
    });

    $scope.change = function(index) {
        
        $scope.requestResult = $scope.re.updateCart({items:$scope.items});
        
/*
        $http({
            method: 'POST',
            url: '/',
            data: {},
            headers: {
                'module': 'Shopingo',
                'mod_resource_id': '1',
                'event': 'updateCart'
            }
        }).
        success(function(data, status, headers, config) {
            console.debug('success');
            //console.debug(data, status, headers, config);
            //$scope.items = data;
            //$scope.$apply();
        }).
        error(function(data, status, headers, config) {
            console.debug('error');
            console.debug(data, status, headers, config);
        });*/

    };

};