How to Use a temporary variable from jquery function in Angularjs controller

Shortlink:

added the a button with a ng-click event as follows:

<button ng-click='addthisItem(nome)'>Add item</button>

then in your controller in jquery:

$scope.addthisItem = function(nome) {

if ($scope.food.hasOwnProperty(nome)) {
$scope.add($scope.food[nome]);
}
else {
//some error handling here
}
}

You can see full code below

<!DOCTYPE html>
<html ng-app="myApp">

<head>
<title>Point of Sale Interface</title>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

<script data-require="angular.js@1.2.13" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script data-require="angular.js@1.2.13" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular-animate.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>

<body data-ng-controller="POSController">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
<h2><span class="text-warning">Morning</span> <span class="text-success">Food</span></h2>
<span class="pull-right text-muted">Today is Jan 14, 2015</span>
<div class="text-muted">1429 Stockholm, Sweden</div>
</div>
</div>
</div>

<div class="row">
<div class="col-sm-6">
<div class="well">
<div class="box">
<div class="text-info">Breakfast</div>
<hr>

<button class="buttons btn btn-primary" ng-click="add(food.pizza)">Pizza</button>
<button class="buttons btn btn-primary" ng-click="add(food.donut)">Donuts</button>
<button class="buttons btn btn-primary" ng-click="add(food.tortilla)">Tortilla</button>
<button class="buttons btn btn-primary" ng-click="add(food.burger)">Burger</button>
<button class="buttons btn btn-success" ng-click="add(food.samosa)">Samosas</button>
</div>

<br></br>
<div class="box">
<div class="text-info">Bewerages</div>
<hr>

<button class="buttons btn btn-primary" ng-click="add(food.coldcoffee)">Cold Coffee</button>
<button class="buttons btn btn-primary" ng-click="add(food.hotcoffee)">Hot Coffee</button>
<button class="buttons btn btn-primary" ng-click="add(food.coke)">Coke</button>
<button class="buttons btn btn-primary" ng-click="add(food.dietcoke)">Diet Coke</button>
<button class="buttons btn btn-primary" ng-click="add(food.pepsi)">Pepsi</button>
<button id="agg" class="buttons btn btn-primary" ng-click="add(food.incognita)">Incognita</button>
</div>
<input type="text" placeholder="Nome alimento" ng-model="nome"/>
<button class='btn btn-default' ng-click='addthisItem(nome)'>Add item</button>
</div>
</div>

<div class="col-sm-6">
<div class="well">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Order Summary</h3>
</div>
<div class="panel-body" style="max-height:320px; overflow:auto;">
<div class="text-warning" ng-hide="order.length">
Noting ordered yet !
</div>
<ul class="list-group">
<li class="list-group-item" ng-repeat="item in order">
<span> {{item.item.detail}}</span>

<div class="btn-group pull-right" role="group" aria-label="...">
<button type="button" class="btn btn-xs " ng-disabled="" ng-click="subtractItem(item, $index)">
<span type="button" class="glyphicon glyphicon-minus"></span>
</button>
<button type="button" class="btn  btn-xs" ng-click="addItem(item, $index)">
<span class="glyphicon glyphicon-plus"></span>
</button>
<button type="button" class="btn btn-danger btn-xs"  ng-click="deleteItem($index)">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
<div class="label label-success pull-right">${{item.totalPrice}}</div>
<div class="label label-default pull-right">{{item.orderedItemCnt}}</div>

</li>
</ul>

</div>
<div class="panel-footer" ng-show="order.length">
<div class="label label-danger ">Total: ${{getSum()}}</div>
</div>
<div class="panel-footer" ng-show="order.length">
<div class="text-muted">
Do not let go of customer without taking payment !
</div>
</div>
<div class="pull-right">
<span class="btn btn-default" ng-click="clearOrder()" ng-disabled="!order.length">Clear</span>
<span class="btn btn-danger" ng-click="checkout()" ng-disabled="!order.length">Checkout</span>
</div>

</div>
</div>
</div>
</div>
</div>

</body>

</html>

You can see Demo Here

You can use cookie plugin

Download Here

How to use this plugin

//To set a cookie
$.cookie('the_cookie', 'the_value');

//Create expiring cookie, 7 days from then:
$.cookie('the_cookie', 'the_value', { expires: 7 });

//Create expiring cookie, valid across entire page:
$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });

//Read cookie
$.cookie('the_cookie'); // => 'the_value'
$.cookie('not_existing'); // => null



//Delete cookie by passing null as value:
$.cookie('the_cookie', null);


// Creating cookie with all availabl options
$.cookie('myCookie2', 'myValue2', { expires: 7, path: '/', domain: 'example.com', secure: true, raw: true });

Available Options

 

  • expires: Define lifetime of the cookie. Value can be a Number (which will be interpreted as days from time of creation) or a Date object. If omitted, the cookie is a session cookie.
  • path: Define the path where cookie is valid. By default the path of the cookie is the path of the page where the cookie was created (standard browser behavior). If you want to make it available for instance across the entire page use path: ‘/’.
  • domain: Domain of page where the cookie was created.
  • secure: Default: false. If true, the cookie transmission requires a secure protocol (https).
  • raw: By default the cookie is encoded/decoded when creating/reading, using encodeURIComponent/ decodeURIComponent. Turn off by setting raw: true.

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!




%d bloggers like this: