Develop Reference

grocery cart on Angular

I create add-to-cart app.
Want to click each item and add it to cart.
But firstly I need to click button 'add to cart' and increase its value with every click.
As I added ng-repeat, I don't know how to write a function that will be responsible for adding separate item.
angular.module('TransactionApp', [])
.controller('TransactionsCtrl', function($scope) {
$scope.title = 'Online-store';
$scope.itemsArray = [
{ price: 50, name: "Whey protein", img: 'img/item-1.png', quantity: 0},
{ price: 60, name: "Protein bar", img: 'img/item-2.png', quantity: 0 },
{ price: 35, name: "BCAA", img: 'img/item-3.png', quantity: 0 },
{ price: 50, name: "Whey protein", img: 'img/item-1.png', quantity: 0 },
{ price: 60, name: "Protein bar", img: 'img/item-2.png', quantity: 0 },
{ price: 80, name: "BCAA", img: 'img/item-3.png', quantity: 0 }
];
// $scope.count = 0;
$scope.addTo = function(){
}
});
here is html:
<h2 class="title">{{title}} <i class="em em-shopping_bags"></i></h2>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-2 col-sm-6">
<div class="card" style="width: 18rem;" ng-repeat='item in itemsArray'>
<img class="card-img-top" ng-src={{item.img}} alt="Card image cap">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">{{item.name}}</p>
<p class="price">{{ item.price | currency }}</p>
<i class="em em-shopping_trolley"></i> Add to cart <span class="number">{{ item.quantity }}</span>
</p>
</div>
</div>
</div>
</div>
</div>

Pass the item to controller with addTo(item):
<a href="#" class="btn btn-warning" ng-click="addTo(item)">
<i class="em em-shopping_trolley"></i>
Add to cart
<span class="number">{{ item.quantity }}</span>
</a>
after your addTo accepts a parameter:
$scope.addTo = function(item){ // 'item' is a reference to an element in itemsArray
item.quantity++;
}

I believe each of your item in view has its own Add to Cart Button against it and I also believe you want to increase the quantity property of each of the item each time a user clicks the button against that item.
For that all you have to do is pass the item to addTo() method like :-
<i class="em em-shopping_trolley"></i> Add to cart <span class="number">{{ item.quantity }}</span>
and modify the method definition in controller
$scope.addTo = function(var item){
item.quantity++;
}

angular dragdrop drag across ng repeat elements

here is the plunkr which will best illustrate my problem.
https://plnkr.co/edit/VrT7TmK6tY2u4k2NYJ2U?p=preview
there are two panels the panel on the left has a list of items that you can drag and drop onto wells on the right. the wells are created with a ng repeat. unfortunately I can not drag from one well to the another well on the right side of the screen. not sure why.
<div ng-controller="oneCtrl"><!--one-->
<div class="span3" style='margin-left:10px;'>
<div class="thumbnail"
data-drop="true"
ng-model='list1'
data-jqyoui-options="optionsList1"
jqyoui-droppable="{multiple:true}">
<div class="alert alert-info btn-draggable"
ng-repeat="item in list1"
ng-show="item.title" data-drag="{{item.drag}}"
data-jqyoui-options="{revert: 'invalid'}"
ng-model="list1" jqyoui-draggable="{index: {{$index}},animate:true}"
><!--alert-->
{{item.title}}
</div><!--alert-->
</div>
</div>
<div class="span3" style='margin-left:150px;'>
<div class=thumbnail>
<div class="well"
ng-repeat = "org in orgs"
data-drop="true"
ng-model="org.list"
data-jqyoui-options="{accept:'.btn-draggable:not([ng-model=org.list])'}"
jqyoui-droppable="{multiple:true}">
<div class=" alert alert-success btn-draggable" ng-repeat="item in org.list"
ng-show="item.title"
data-drag="{{item.drag}}"
data-jqyoui-options="{revert: 'invalid'}"
ng-model="org.list"
jqyoui-draggable="{index: {{$index}},animate:true}">
{{item.title}}
</div>
</div>
</div>
</div>
</div><!--one-->
and the javascript
var App = angular.module('drag-and-drop', ['ngDragDrop']);
App.controller('oneCtrl', function($scope, $timeout) {
$scope.orgs = [
{name: 'org1', list: []},
{name: 'org2', list: []},
{name: 'org3', list: []},
]
$scope.list1 = [
{ 'title': 'Item 1', 'drag': true },
{ 'title': 'Item 2', 'drag': true },
{ 'title': 'Item 3', 'drag': true },
{ 'title': 'Item 4', 'drag': true },
{ 'title': 'Item 5', 'drag': true },
{ 'title': 'Item 6', 'drag': true },
{ 'title': 'Item 7', 'drag': true },
{ 'title': 'Item 8', 'drag': true }
];
});

That's because you have data-jqyoui-options="{accept:'.btn-draggable:not([ng-model=org.list])'}" for the repeater in the right panel. This selector is the same for all the generated droppable-zones and it controls which draggable elements are accepted by the droppable. You will be able to drag and drop the items between the generated zones, if you will remove this option (or modify it according to your requirements).
Working plnkr.

How to use ng-repeat:Angularjs?

angular.js ng-repeat items with html content
I have many colleges,location and pincode details but i'm showing now by default html content .how to show list of colleges ,locations and pincodes.Can anyone show me the example in plunker
Using ng-repeat directive
<body ng-app="task">
<div ng-controller="AppCtrl" ng-cloak>
<md-content class="md-padding">
<div>
<md-card-title layout="row" layout-align="start">
<md-checkbox md-no-ink aria-label="" ng-model="data.cb5" class="md-default">
</md-checkbox>
<md-card-title-text layout="column">
<span class="md-headline">Maturi venkata subbarao engg college</span>
<span class="md-subhead">Nadergul,Hyderabad,Telangana 501510</span>
</md-card-title-text>
</md-card-title>
</div>
</md-content>
</div>

Consider you have variables in your controller as below, i.e
$scope.college_data = [{name: 'College 1', location:'Location 1', pincode:'499949'}, {name: 'College 2', location:'Location 2', pincode:'373737'}]
This is what you would do.,
<body ng-app="task">
<div ng-controller="AppCtrl" ng-cloak>
<md-content class="md-padding">
<div ng-repeat="college in college_data">
<md-card-title layout="row" layout-align="start">
<md-checkbox md-no-ink aria-label="" ng-model="college.cb5" class="md-default">
</md-checkbox>
<md-card-title-text layout="column">
<span class="md-headline">{{college.name}}</span>
<span class="md-subhead">{{college.location}}, {{college.pincode}}</span>
</md-card-title-text>
</md-card-title>
</div>
</md-content>
Check the official document for more info. AngularJS Repeat

var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.title = 'Welcome to see ng-repeat usage';
$scope.myObj = [{
college: 'Maturi',
location: 'venkata subbarao engg college',
pincode: 76003
},
{
college: 'Nadergul',
location: 'Hyderabad,Telangana',
pincode: 501510
},
{
college: 'LNCT',
location: 'bhopal',
pincode: 411001
},
{
college: 'Imperial',
location: 'Mumbai,India',
pincode: 4110008
}
];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="MyCtrl">
<div>
{{title}}
<div ng-repeat='obj in myObj'>
College: {{obj.college}} Location: {{obj.location}} Pincode: {{obj.pincode}}
<br />
<span>----------------------------------</span>
</div>
</div>
</body>
I have created a simple demo for you:
https://jsfiddle.net/varunsukheja/tLy451fx/
ng-repeat has syntax very similar to for loop, like
for name in nameList
similarly ng-repeat='name in nameList'

Add the ng-repeat as below,
<body ng-app="task">
<div ng-controller="AppCtrl" ng-cloak>
<md-content class="md-padding">
<div ng-repeat="item in dataItems">
<md-card-title layout="row" layout-align="start">
<md-checkbox md-no-ink aria-label="" ng-model="item.cb5" class="md-default">
</md-checkbox>
<md-card-title-text layout="column">
<span class="md-headline">{{item.Name}}</span>
<span class="md-subhead">{{item.location}}</span>
</md-card-title-text>
</md-card-title>
</div>
</md-content>
</div>

I hope It will help you.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.clg_info = [
{name: 'College 1', location:'Location 1', pincode:'499949'},
{name: 'College 2', location:'Location 2', pincode:'373737'},
{name: 'College 3', location:'Location 3', pincode:'499949'},
{name: 'College 4', location:'Location 4', pincode:'373737'}]
});
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.js" ></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.css" />
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<div ng-repeat ="clg in clg_info">
<md-card-title layout="row" layout-align="start">
<md-checkbox md-no-ink aria-label="" ng-model="college.cb5" class="md-default">
</md-checkbox>
<md-card-title-text layout="column">
<span class="md-headline">{{clg.name}}</span>
<span class="md-subhead">{{clg.location}}, {{clg.pincode}}</span>
</md-card-title-text>
</md-card-title>
</div>
</div>
</body>
</html>

Please visit: https://docs.angularjs.org/api/ng/directive/ngRepeat
and perhaps: http://embed.plnkr.co/Rbj3pw/
http://jsfiddle.net/razh/3mwjr/
<div ng-repeat="model in collection | orderBy: 'id' as filtered_result">
{{model.name}}
</div>
The idea behind is to repeat the same html tag for all items in the collection.
I like also the | orderBy.
The pipe(|) applies to the previous object(collection). In the example we apply a orderBy 'id' to the collection. If you need to access later in your code the filtered data it is common to use the "as filteredResult", once you declared it you can access in your app.js the object filteredResult.
BTW. It is very similar to the #foreach in Laravel/ASPNET-CSHTML or the .enter() in d3js

If you want to repeat for example 10 times, in your controller define
$scope.num_of_repeat = 10;
$scope.array = {};
var i = 0;
for (i=0;i<$scope.num_of_repeat-1;i++)
{
$scope.array[i] = i;
}
in html code <span ng-repeat="arr in array" class="md-headline">Maturi venkata subbarao engg college</span>

Computed function from Vue component Data

I have the following Vue component and data:
Vue.component('receipt', {
template: '#receipt-template',
data: function() {
return {
tip: 8.50
};
},
computed: {
subtotal: function() {
return this.sales.price;
console.log(this.sales.price);
}
},
props: ['header', 'date', 'sales' ]
})
new Vue({
el: '#content',
data: {
sales1: [
{amount: 1, desc: 'A book title', price: 13.99},
{amount: 3, desc: 'An espresso title', price: 5.00},
{amount: 6, desc: 'A drink title', price: 4.25},
{amount: 2, desc: 'A pastrt', price: 3.99}
],
sales2: [
{amount: 1, desc: 'A title', price: 9},
{amount: 2, desc: 'An title', price: 0},
{amount: 3, desc: 'A title', price: 5},
{amount: 4, desc: 'A ', price: 99}
]
}
})
And the following template:
<div class="page page2 current">
<!-- Call our custom receipt vue component -->
<receipt header="Between the Covers & Grinders Café" date="Sept. 23, 2016 10:52 am" :sales="sales1"></receipt>
<receipt header="Between the Covers & Grinders Café" date="Sept. 25, 2016 3:08 pm" :sales="sales2"></receipt>
<div class="clearfix"></div>
</div><!--end page2-->
<template id="receipt-template">
<div class="receipt">
<div class="receipt-header">
<h2>{{ header }}</h2>
</div><!--end receipt-header-->
<div class="receipt-body">
<div class="receipt-labels">
<p>Sales</p>
<p>{{ date }}</p>
<div class="clearfix"></div>
</div><!--end receipt-labels-->
<div class="receipt-sales">
<div class="receipt-sale-row" v-for="sale in sales">
<p>{{ sale.amount }}</p>
<p>{{ sale.desc }}</p>
<p class="sale-price">${{ sale.price }}</p>
</div><!--end receipt-sale-row-->
</div><!--end receipt-sales-->
<div class="receipt-subtotals">
<p>Subtotal</p>
<p>{{ subtotal }}</p>
<p>Tax</p>
<p>$2.64</p>
<div class="clearfix"></div>
</div><!--end subtotals-->
<div class="receipt-totals">
<p>Tip</p>
<p>{{ tip }}</p>
<p>Total</p>
<p></p>
<div class="clearfix"></div>
</div><!--end totals-->
<div class="receipt-card">
<p>Visa 1825</p>
<p>$41.25</p>
<div class="clearfix"></div>
</div><!--end card-->
</div><!--end receipt-body-->
</div><!--end receipt-->
</template>
I can't figure out how to compute the 'subtotal'. What I need to do is have the computed function 'subtotal' return the total of all prices for each 'sales' object. What am I doing wrong?

You need to add up all the price components in this.sales.
subtotal: function() {
let result = 0;
this.sales.forEach((sale) => result += sale.price);
return Math.round(100 * result) / 100;
}
Vue.component('receipt', {
template: '#receipt-template',
data: function() {
return {
tip: 8.50
};
},
computed: {
subtotal: function() {
let result = 0;
this.sales.forEach((sale) => result += sale.price);
return Math.round(100 * result) / 100;
}
},
props: ['header', 'date', 'sales']
});
new Vue({
el: '.page.current',
data: {
sales1: [{
amount: 1,
desc: 'A book title',
price: 13.99
}, {
amount: 3,
desc: 'An espresso title',
price: 5.00
}, {
amount: 6,
desc: 'A drink title',
price: 4.25
}, {
amount: 2,
desc: 'A pastrt',
price: 3.99
}],
sales2: [{
amount: 1,
desc: 'A title',
price: 9
}, {
amount: 2,
desc: 'An title',
price: 0
}, {
amount: 3,
desc: 'A title',
price: 5
}, {
amount: 4,
desc: 'A ',
price: 99
}]
}
});
.receipt-subtotals p,
.receipt-labels p,
.receipt-sale-row p,
.receipt-totals p {
display: inline-block;
margin: 1rem;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<div class="page page2 current">
<!-- Call our custom receipt vue component -->
<receipt header="Between the Covers & Grinders Café" date="Sept. 23, 2016 10:52 am" :sales="sales1"></receipt>
<receipt header="Between the Covers & Grinders Café" date="Sept. 25, 2016 3:08 pm" :sales="sales2"></receipt>
<div class="clearfix"></div>
</div>
<!--end page2-->
<template id="receipt-template">
<div class="receipt">
<div class="receipt-header">
<h2>{{ header }}</h2>
</div>
<!--end receipt-header-->
<div class="receipt-body">
<div class="receipt-labels">
<p>Sales</p>
<p>{{ date }}</p>
<div class="clearfix"></div>
</div>
<!--end receipt-labels-->
<div class="receipt-sales">
<div class="receipt-sale-row" v-for="sale in sales">
<p>{{ sale.amount }}</p>
<p>{{ sale.desc }}</p>
<p class="sale-price">${{ sale.price }}</p>
</div>
<!--end receipt-sale-row-->
</div>
<!--end receipt-sales-->
<div class="receipt-subtotals">
<p>Subtotal</p>
<p>${{ subtotal }}</p>
<p>Tax</p>
<p>$2.64</p>
<div class="clearfix"></div>
</div>
<!--end subtotals-->
<div class="receipt-totals">
<p>Tip</p>
<p>{{ tip }}</p>
<p>Total</p>
<p></p>
<div class="clearfix"></div>
</div>
<!--end totals-->
<div class="receipt-card">
<p>Visa 1825</p>
<p>$41.25</p>
<div class="clearfix"></div>
</div>
<!--end card-->
</div>
<!--end receipt-body-->
</div>
<!--end receipt-->
</template>

Displaying a grid of images sorted by category using angularjs

I am building a web application using angular and I want to display a grid of items sorted by category. Each row will correspond to a certain category. This is what my code looks like:
<ion-item ng-repeat="item in items|filter:query|orderBy:'name' ">
<div class="row" ng-scrollable style="width:400px;height:300px;">
<div class="col">
<img ng-src={{item.img}}/>
<p>{{item.name}}</p>
<p>Old Price: {{item.newPrice}}</p>
<p>New Price: {{item.newPrice}}</p>
<button class ="button" ng-click="addToGrocery()">Add to List</button>
</div>
</div>
My controller.js file looks like this:
.controller('CouponsCtrl', function($scope) {
$scope.items = [{ name: 'Banana', newPrice: 3.29, oldPrice: 4.49, aisle: 'A', img: 'http://placehold.it/280x150', category: 'Fruits' },
{ name: 'Chocolate', newPrice: 3.19, oldPrice: 5.39, aisle: 'B', img: 'http://placehold.it/280x150' , category: 'Dairy'},
{ name: 'Brocolli', newPrice: 2.29, oldPrice: 4.40, aisle: 'D', img: 'http://placehold.it/280x150' , category: 'Vegetables'}
];
})
I believe I need nested ng-repeats but I am not sure how to incorporate that.

Base on groupby Group item detail using AngularJs ng-repeat
<body ng-controller="con">
<div ng-repeat="(setKey, set) in items|filter:query|orderBy:'name'|groupBy:'category'">
{{setKey}}
<div ng-repeat="item in set">
<div class="row" ng-scrollable="" style="width:400px;height:300px;">
<div class="col">
<img ng-src="{{item.img}}/" />
<p>{{item.name}}</p>
<p>Old Price: {{item.newPrice}}</p>
<p>New Price: {{item.newPrice}}</p>
<button class="button" ng-click="addToGrocery()">Add to List</button>
</div>
</div>
</div>
</div>
</body>
http://plnkr.co/edit/GMW52iJyRlQ2otZndGLM?p=preview