We Keep Coding

How to code a nested v-for loop to display all elements?

I am coding an app which makes orders and for each order their are a certain amount of products within them. How would i code my VueJs code below to display all products for each order that comes in? The code below is my VueJS template
<div class="card card-default" v-for="(order, index) in orders">
<p style="padding:0px;"><strong> User: </strong> {{order.user.name}} </p>
<table class="table-repsonsive table-bordered ">
<thead>
<th scope="col">Product</th>
<th scope="col">Price</th>
<th scope="col">Quantity</th>
</thead>
<tbody v-for="(product, pindex) in orders">
--how to loop through each product of each order in the array?
<td>{{product.order[pindex].name}}</td>
<td>R{{product.order[pindex].price}}</td>
<td>{{product.order[pindex].quant}}</td>
</tbody>
</table>
</div>
This is the order object that is pushed within the orders array after each order takes place
{
"order": [
{
"id": 1,
"name": "Garden",
"price": 20,
"quant": 1
},
{
"id": 2,
"name": "Greek",
"price": 24,
"quant": 1
},
{
"id": 3,
"name": "Chicken mayo",
"price": 24,
"quant": 1
}
],
"user": {
"id": 1,
"role_id": 2,
"name": "Mapia",
"email": "mapia#gmail.com",
"avatar": "users/default.png",
"settings": null,
"created_at": "2018-07-05 13:10:26",
"updated_at": "2018-07-05 13:10:26"
}
}

You should take you order and loop through its property order
<tbody v-for="product in order.order">
<td>{{product.name}}</td>
<td>R{{product.price}}</td>
<td>{{product.quant}}</td>
</tbody>

Handlebars bind outside each in markup

I have a problem to bind an object in handlebars outside each "sectorsPressCoverageElements" in a markup.
This is my data that is a json:
{
"name": "Rassegna",
"page": 1,
"pages": 7,
"sectorsPressCoverageElements": [
{
"id": 25129,
"media": "media",
"linkMedia": "",
"article": "article",
"journalist": "",
"linkJournalist": "",
"publishingDate": "2017-11-23T09:00:00",
"purchase": false
},
{
"id": 25129,
"media": "media",
"linkMedia": "",
"article": "article",
"journalist": "",
"linkJournalist": "",
"publishingDate": "2017-11-23T09:00:00",
"purchase": false
}
],
"categories": [
],
"error": null
}
My problem is bind "name" that is outside each.
This my markup with area to bind "data-name" with name (for example in json : "name": "Rassegna"):
<script id="handlePressCoverage" type="text/x-handlebars-template">
{{#each sectorsPressCoverageElements}}
<tr data-id="{{id}}" data-category="0">
#*<td> <input type="checkbox" class="select-element"></td>*#
<td class="col-xs-2">{{#simplifyDate publishingDate}}{{/simplifyDate}}</td>
<text>
<td class="col-xs-1"><button data-id="{{id}}" data-name="{{HOW BIND NAME HERE??}}" class="btn btn-success btn-xs iPressShare">Save &nbsp<i class="iPressIconShare fas fa-share-alt"></i></button></td>
</text>
</tr>
{{/each}}
</script>
And pass data to handlebars:
var sourcePressCoverage = $("#handlePressCoverage").html();
var templatePressCoverage = Handlebars.compile(sourcePressCoverage);
$.getJSON(url, function (data) {
$htmlsourcePressCoverage = $(templatePressCoverage(data));
});

To bind name that is outside each, You can use ../ segments in Handlebar. This will evaluate their paths against a parent context.
For example in your case simply putting ../name in the data-name attribute will result in Rassegna
<script id="handlePressCoverage" type="text/x-handlebars-template">
{{#each sectorsPressCoverageElements}}
<tr data-id="{{id}}" data-category="0">
#*<td> <input type="checkbox" class="select-element"></td>*#
<td class="col-xs-2">{{#simplifyDate publishingDate}}{{/simplifyDate}}</td>
<text>
<td class="col-xs-1"><button data-id="{{id}}" data-name="{{../name}}" class="btn btn-success btn-xs iPressShare">Save &nbsp<i class="iPressIconShare fas fa-share-alt"></i></button></td>
</text>
</tr>
{{/each}}

Angular ng-show and ng-change to show and hide tables depending on the user selection in <select> tag

UPDATE: Sorry, I should've made it more clear but what I wanted also was if I select from the "drop down 1" other than the null value, my table 2 automatically disappears b/c I only want to see table 1 when I am using drop down 1. Same thing for "drop down 2". If I choose any non-null values from drop down 2, my table 1 disappears and I only see table 2. I also updated my Fiddle here https://jsfiddle.net/missggnyc/4vod1L9g/7/ and the tables are hiding if the null values are selected from the drop down. All I need now is how to show one or the other table depending on which drop down I am using.
ORIGINAL POST:
I am getting a bit confused about how to use ng-show or ng-change to show my two different tables depending on the user selection with two dif. drop downs.
Here's the scenario:
As long as the user doesn't select SELECT YOUR ANSWER with null value in both drop downs, I have a filter that does the string comparison and filters out by color. This is what I want to do.
User selects from "drop down 1"
show table 1 with filtered results if the user doesn't select "SELECT YOUR ANSWER" with null value
if the user selects "SELECT YOUR ANSWER", then no tables are displayed
hide table 2 as long as "drop down 1" is getting selected
User selects from "drop down 2"
show table 2 with filtered results if the user doesn't select "SELECT YOUR ANSWER" with null value
if the user selects "SELECT YOUR ANSWER", then no tables are displayed
hide table 2 as long as "drop down 1" is getting selected
I am confused about how to use ng-show or ng-change in my case. Any suggestions?
See demo here
HTML
<div ng-app="myColors">
<div ng-controller="cController">
<h3>drop down 1</h3>
<select ng-model="selectedAnswer1" ng-options="c.cat for c in mySelection1" ng-change=""></select>
<pre>{{selectedAnswer1}}</pre>
<h3>drop down 2</h3>
<select ng-model="selectedAnswer2" ng-options="c.cat for c in mySelection2"></select>
<pre>{{selectedAnswer2}}</pre>
<hr>
<h4>
table 1
</h4>
<table>
<tr>
<td>ID</td>
<td>Category</td>
</tr>
<tr ng-repeat="f in fruit">
<td>{{f.id}}</td>
<td>{{f.f_category}}</td>
</tr>
</table>
<h4>
table 2
</h4>
<table>
<tr>
<td>Car</td>
</tr>
<tr ng-repeat="c in car">
<td>{{c.category}}</td>
</tr>
</table>
</div>
</div>
JS
var app = angular.module("myColors", []);
app.controller("cController", function($scope) {
$scope.mySelection1 = [
{"cat": "SELECT YOUR ANSWER", "value": null},
{"cat": "YELLOW", "value": "yellow"},
{"cat": "ORANGE", "value": "orange"}
];
$scope.mySelection2 = [
{"cat": "SELECT YOUR ANSWER", "value": null },
{"cat": "GREEN CAR", "value": "green"},
{"cat": "BLUE CAR", "value": "blue"}
];
$scope.fruit = [{
"id": "red",
"f_category": ["Apple", "Strawberry", "Pineapple"]
}, {
"id": "yellow",
"f_category": ["Banana", "Pineapple"]
}, {
"id": "orange",
"f_category": ["Peach", "Nectarine"]
}];
$scope.car = [{
"name": "yellow",
"category": ["SUV", "Truck"]
}, {
"name": "blue",
"category": ["Van"]
}, {
"name": "orange",
"category": ["Mini-Van"]
}];
});

UPDATE:
as far I understood you only want show/hide the other table if the first one is select. Here is a simple solution:
<div ng-app="myColors">
<div ng-controller="cController">
<h3>drop down 1</h3>
<select name="select1" ng-model="selectedAnswer1" ng-options="c.cat for c in mySelection1" ng-change="selection1Change()"></select>
<pre>{{selectedAnswer1}}</pre>
<h3>drop down 2</h3>
<select name="select2" ng-model="selectedAnswer2" ng-options="c.cat for c in mySelection2" ng-change="selection2Change()"></select>
<pre>{{selectedAnswer2}}</pre>
<hr>
<div ng-show="selectedAnswer1 && flag1">
<h4>
table 1
</h4>
<table>
<tr>
<td>ID</td>
<td>Category</td>
</tr>
<tr ng-repeat="f in fruit" ng-show="selectedAnswer1.value === f.id">
<div >
<td >{{f.id}}</td>
<td >{{f.f_category}}</td>
</div>
</tr>
</table>
</div>
<div ng-show="selectedAnswer2 && flag2">
<h4>
table 2
</h4>
<table>
<tr>
<td>Car</td>
</tr>
<tr ng-repeat="c in car" ng-show="selectedAnswer2.value === c.name">
<td>{{c.category}}</td>
</tr>
</table>
</div>
</div>
</div>
var app = angular.module("myColors", []);
app.controller("cController", function($scope) {
$scope.mySelection1 = [
{"cat": "SELECT YOUR ANSWER", "value": null},
{"cat": "YELLOW", "value": "yellow"},
{"cat": "ORANGE", "value": "orange"}
];
$scope.mySelection2 = [
{"cat": "SELECT YOUR ANSWER", "value": null },
{"cat": "GREEN CAR", "value": "green"},
{"cat": "BLUE CAR", "value": "blue"}
];
$scope.fruit = [{
"id": "red",
"f_category": ["Apple", "Strawberry", "Pineapple"]
}, {
"id": "yellow",
"f_category": ["Banana", "Pineapple"]
}, {
"id": "orange",
"f_category": ["Peach", "Nectarine"]
}];
$scope.car = [{
"name": "yellow",
"category": ["SUV", "Truck"]
}, {
"name": "blue",
"category": ["Van"]
}, {
"name": "orange",
"category": ["Mini-Van"]
}];
$scope.selection1Change = function(){
$scope.flag1 = true;
$scope.flag2 = false;
}
$scope.selection2Change = function(){
$scope.flag1 = false;
$scope.flag2 = true;
}
});
OLD:
No need for to use ng-change, because angularjs itself it will be update the value of ng-model, so you can use ng-show with the value of ng-model, as show in the code bellow:
<div ng-app="myColors">
<div ng-controller="cController">
<h3>drop down 1</h3>
<select ng-model="selectedAnswer1" ng-options="c.cat for c in mySelection1"></select>
<pre>{{selectedAnswer1}}</pre>
<h3>drop down 2</h3>
<select ng-model="selectedAnswer2" ng-options="c.cat for c in mySelection2"></select>
<pre>{{selectedAnswer2}}</pre>
<hr>
<h4>
table 1
</h4>
<table ng-show="selectedAnswer1">
<tr>
<td>ID</td>
<td>Category</td>
</tr>
<tr ng-repeat="f in fruit" ng-show="selectedAnswer1.value === f.id">
<div >
<td >{{f.id}}</td>
<td >{{f.f_category}}</td>
</div>
</tr>
</table>
<h4>
table 2
</h4>
<table ng-show="selectedAnswer2">
<tr>
<td>Car</td>
</tr>
<tr ng-repeat="c in car" ng-show="selectedAnswer2.value === c.name">
<td>{{c.category}}</td>
</tr>
</table>
</div>
</div>

ng-show allows you to take advantage of databinding, so you don't have to manually watch events like you would do in vanilla JS (with event handlers or onchange attribute). It's the preferred way to do things in angularJs. Use ngChange only when you have no other choice.
Also, it would probably be even better to use ng-if here since you would spare the cost of building the tables when not shown.

using ng-change and filter directive you achieve the behaviour you are expecting, take a look at this snippet
var app = angular.module("myColors", []);
app.controller("cController", function($scope) {
$scope.selectedFruit = null;
$scope.selectedCar = null;
$scope.mySelection1 = [
{"cat": "SELECT YOUR ANSWER", "value": null},
{"cat": "YELLOW", "value": "yellow"},
{"cat": "ORANGE", "value": "orange"}
];
$scope.mySelection2 = [
{"cat": "SELECT YOUR ANSWER", "value": null },
{"cat": "GREEN CAR", "value": "green"},
{"cat": "BLUE CAR", "value": "blue"}
];
$scope.fruit = [{
"id": "red",
"f_category": ["Apple", "Strawberry", "Pineapple"]
}, {
"id": "yellow",
"f_category": ["Banana", "Pineapple"]
}, {
"id": "orange",
"f_category": ["Peach", "Nectarine"]
}];
$scope.car = [{
"name": "yellow",
"category": ["SUV", "Truck"]
}, {
"name": "blue",
"category": ["Van"]
}, {
"name": "orange",
"category": ["Mini-Van"]
}];
$scope.selectFruit = function(selectedItem){
$scope.selectedFruit = selectedItem.value;
}
$scope.selectCar = function(selectedItem){
$scope.selectedCar = selectedItem.value;
}
});
table, th, td {
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<div ng-app="myColors">
<div ng-controller="cController">
<h3>drop down 1</h3>
<select ng-model="selectedAnswer1" ng-options="c.cat for c in mySelection1" ng-change="selectFruit(selectedAnswer1)"></select>
<pre>{{selectedAnswer1}}</pre>
<h3>drop down 2</h3>
<select ng-model="selectedAnswer2" ng-options="c.cat for c in mySelection2" ng-change="selectCar(selectedAnswer2)"></select>
<pre>{{selectedAnswer2}}</pre>
<hr>
<h4>
table 1
</h4>
<table>
<tr>
<td>ID</td>
<td>Category</td>
</tr>
<tr ng-repeat="f in fruit | filter:selectedFruit">
<td>{{f.id}}</td>
<td>{{f.f_category}}</td>
</tr>
</table>
<h4>
table 2
</h4>
<table>
<tr>
<td>Car</td>
</tr>
<tr ng-repeat="c in car | filter:selectedCar">
<td>{{c.category}}</td>
</tr>
</table>
</div>
</div>

AngularJS Array shows all ID of field every time on same index

I have a static array and I am trying to show a particular field of this array through ng-repeat, but my array shows every time the ID field on single index.
This is what my output screenshot looks like
You can find my code below,
function monthCalendarController($scope, $http, $rootScope, $filter, $location, WebService, CalendarEventService) {
$scope.eventSelected = function(event) {
var params = {
id: event.event.id
};
var url = $rootScope.url + '/v1/show_event';
var token = window.localStorage['token'];
var result = WebService.makeServiceCallHeader(url, params, $rootScope.POST, token);
result.then(function(response) {
if (response.status == 200) {
CalendarEventService.addEvent(response.data.event);
$location.path("/calendarEvent");
} else {
WebService.showAlert('Problem in Loading');
}
}, function(response) {
console.log('' + JSON.stringify(response));
});
};
$scope.persons = [
{ "id": 1, "name": "A", "select": true },
{ "id": 2, "name": "B", "select": true },
{ "id": 3, "name": "C", "select": true },
{ "id": 4, "name": "D", "select": true },
{ "id": 5, "name": "E", "select": true },
{ "id": 6, "name": "F", "select": true },
{ "id": 0, "name": "G", "select": true }
];
console.log($scope.counts);
$scope.selectDate = function(date) {
$scope.selectedDate = date.date;
$scope.showEventsDiv = true;
};
};
HTML
<div ng-controller="monthCalendarController">
<table class="table table-bordered monthview-datetable monthview-datetable">
<thead>
<tr>
<th ng-show="showWeeks" class="calendar-week-column text-center">#
</th>
<th ng-repeat="label in labels track by $index" class="text-center">
<small>{{label}}
</small>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows track by $index">
<td ng-show="showWeeks" class="calendar-week-column text-center">
<small>
<em>{{ weekNumbers[$index] }}</em>
</small>
</td>
<td ng-repeat="dt in row track by dt.date"
class="monthview-dateCell"
ng-click="select(dt.date)"
ng-class="{\'text-center\':true, \'monthview-current\': dt.current&&!dt.selected&&!dt.hasEvent,\'monthview-secondary-with-event\': dt.secondary&&dt.hasEvent, \'monthview-primary-with-event\':!dt.secondary&&dt.hasEvent&&!dt.selected, \'monthview-selected\': dt.selected}">
<div ng-class="{\'text-muted\':dt.secondary}" ng-click="selectDate(dt.date)">
<p ng-repeat="person in persons">
{{person.id}}!
</p>
{{dt.label}}
</div>
</td>
</tr>
</tbody>
</table>
<div ng-if="showEventDetail" class="event-detail-container" ng-show="showEventsDiv">
<div class="scrollable" style="height: 200px">
<div class="col-md-12 col-xs-12" style="font-size: 18px; padding-left: 15px;">
<i class="ion-calendar">
</i>{{selectedDate.date |date:\'MM/dd/yyyy\'}}
</div>
<div style="clear: both">
</div>
<div class="item item-divider event">
Events
</div>
<table class="table table-bordered table-striped table-fixed">
<tr ng-repeat="event in selectedDate.events" ng-if="selectedDate.events">
<td ng-if="!event.allDay" class="monthview-eventdetail-timecolumn cal-date-txt">
{{event.startTime|date: \'HH:mm\'}} {{event.endTime|date: \'HH:mm\'}}
</td>
<td ng-if="event.allDay" class="monthview-eventdetail-timecolumn">
All day
</td>
<td class="event-detail cal-date-txt day" ng-click="eventSelected({event:event})">
{{event.title}}
</td>
</tr>
<tr ng-if="!selectedDate.events">
<td class="no-event-label">No Events</td>
</tr>
</table>
</div>
</div>
</div>
Array always shows ID single index.
Can someone explain and help me ? I can still not figure out why.

AngularJS <select> two way data binding for <option> coming from AJAX call

I have this Controller:
JApp.controller('WebsiteController', function($scope, $resource) {
var UsersService = $resource('/auth/users', {});
$scope.adding = false;
$scope.users = [];
$scope.addUser = function() {
$scope.adding = true;
UsersService.query({}, function(data) {
$scope.users = data;
$scope.selectedUser = data[0];
});
}
$scope.cancelAddUser = function() {
$scope.adding = false;
}
});
My HTML:
<section class="vbox" ng-controller="WebsiteController">
<section class="panel animated fadeInDown">
<header class="panel-heading">
<h3>{{selectedUser.last_name}} </h3> <!-- Just to test I print it here -->
</header>
<div class="panel-body m-b">
<div class="row text-sm wrapper">
#if (role_admin())
<i class="icon-plus"></i> New Website
#endif
</div>
<div class="table-responsive">
<table class="table table-striped b-t text-sm">
<thead>
<tr>
<th>URL</th>
<th>Assigned to</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<!-- Outside this <tr> doesn't work -->
<tr ng-repeat="website in websites">
<td> {{website.url}}</td>
<td>
<span ng-repeat="assigned in website.users"> <span class="label label-info"> {{assigned.first_name}} </span> </span>
<a ng-click="addUser()" ng-hide="adding" class="btn btn-success btn-xs"> Add new </a></span>
<select ng-hide="!adding"
name="myselect"
ng-model="selectedUser"
ng-options="u.first_name for u in users">
</select>
Cancel
<input type="text" ng-model="selectedUser.first_name"> <!-- It works here! -->
</td>
<td>
<i class="icon-pencil"></i> Edit
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</section>
Updated: Notice that it works in my <input> next to the <select>, but doesn't work in my <header> (only binds once)
So when I click on the add user, the AJAX call will retrieve list of users, and successfully show it in the <select> and by default, selectedUser will be pointing at data[0] which is the first user. But now the two way binding is now bound to data[0] instead. If I change my selection to other user, selectedUser is not updated. But if I update my selectedUser, let's say the name, the name in the dropdown list also change.
I have tried not using the line
$scope.selectedUser = data[0];
but still doesn't work anyway, it is not bound at all though I specify ng-model="selectedUser".
The JSON returned:
[
{
"id": 1,
"role_id": 1,
"created_at": "2013-09-19 05:54:36",
"updated_at": "2013-09-19 05:54:36",
"email": "admin#admin.com",
"username": "admin",
"first_name": "Admin",
"last_name": "Istrator"
},
{
"id": 2,
"role_id": 2,
"created_at": "2013-09-19 05:54:36",
"updated_at": "2013-09-19 05:54:36",
"email": "johndoe#gmail.com",
"username": "john",
"first_name": "John",
"last_name": "Doe"
}
]
Anyone can help me with this? I am trying not to go down the $digest or $apply road if I don't have to.
UPDATE 2
The source of the problem is if I try to print out selectedUser outside of the following ng-repeat in my above HTML:
<tr ng-repeat="website in websites"> ...... </tr>
Fiddle to illustrate my problem: http://jsfiddle.net/jofrysutanto/4nfyV/3/

Try This
HTML:
<div ng-app="myApp">
<section class="vbox" ng-controller="WebsiteController">
<section class="panel animated fadeInDown">
<header class="panel-heading">
<h3>{{mySelectedUser.last_name}} </small> <!-- Just to test I print it here -->
</header>
<div class="panel-body m-b">
<div class="table-responsive">
<table class="table table-striped b-t text-sm">
<thead>
<tr>
<th>URL</th>
<th>Assigned to</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="website in websites">
<td>
<span ng-repeat="assigned in website.users"> <span class="label label-info"> {{assigned.first_name}} </span> </span>
<a ng-click="addUser()" ng-hide="adding" class="btn btn-success btn-xs"> Add new </a></span>
<select ng-hide="!adding"
name="myselect"
ng-model="selectedUser"
ng-change="abc(selectedUser)"
ng-options="u.first_name for u in users">
</select>
Cancel
<input type="text" ng-model="selectedUser.first_name"> <!-- It works here! -->
</td>
<td>
<i class="icon-pencil"></i> Edit
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</section>
</div>
Controller :
var JApp = angular.module('myApp', []);
JApp.controller('WebsiteController', function($scope) {
//var UsersService = $resource('/auth/users', {});
$scope.adding = false;
$scope.users = [];
$scope.websites = [
{
"id": 1,
"url": "www.google.com",
"cms": "Wordpress"
}
];
$scope.addUser = function() {
$scope.adding = true;
var data = [
{
"id": 1,
"role_id": 1,
"created_at": "2013-09-19 05:54:36",
"updated_at": "2013-09-19 05:54:36",
"email": "admin#admin.com",
"username": "admin",
"first_name": "Admin",
"last_name": "Istrator"
},
{
"id": 2,
"role_id": 2,
"created_at": "2013-09-19 05:54:36",
"updated_at": "2013-09-19 05:54:36",
"email": "johndoe#gmail.com",
"username": "john",
"first_name": "John",
"last_name": "Doe"
}
];
// UsersService.query({}, function(data) {
$scope.users = data; // suppose data is coming from UsersService.query
$scope.selectedUser = data[1];
$scope.mySelectedUser = $scope.selectedUser ;
// });
}
$scope.abc = function(a) {
$scope.mySelectedUser = a;
}
$scope.cancelAddUser = function() {
$scope.adding = false;
}
});
See DEMO

The value of the select dropdown options is u.first_name, so either do this:
$scope.selectedUser = data[0].first_name;
Or change it to use ids or something like this.
ng-options="u.id as u.first_name for u in users"
$scope.selectedUser = data[0].id;