Develop Reference

v-bind in nested component for radio input is breaking

The problem is I cannot click nested radio button but able to click top level radio buttons.
I have this component imported in parent view:
<app-group-radio-item
v-for="groupsNested in groupsDataNested"
:key="groupsNested.group_id"
:groups="groupsNested"
:groupInputtedData="groupInputtedData">
</app-group-radio-item>
<script>
import AppGroupRadioItem from "./GroupRadioItem";
export default {
name: 'addGroup',
components: {AppGroupRadioItem},
props: {
groupsDataNested: Array,
},
data(){
return {
groupInputtedData: {
group_name: '',
group_type_id: '',
group_parent_id: ''
}
}
}
}
</script>
The Nested component that I am importing:
<template>
<div class="list-group list-group-flush">
<div class="list-group-item">
<div class="form-group">
<label class="custom-control custom-radio">
<input type="radio" class="custom-control-input"
:value="groups.group_id"
v-model="groupInputtedData.group_parent_id">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">{{groups.group_name}}</span>
</label>
</div>
</div>
<div class="collapse nested-items"
:id="'collapseExample' + groups.group_id + 'radio'"
v-if="hasChildren">
<app-group-radio-item
v-for="groupsNested in groups.groups"
:key="groupsNested.group_id"
:groups="groupsNested"
:groupInputtedData="groupInputtedData">
</app-group-radio-item>
</div>
</div>
</template>
<script>
export default {
name: 'appGroupRadioItem',
data: function () {},
props: {
groups: Object,
groupInputtedData: Object
}
}
</script>
Thanks in advance.

Found Solution my own question:
First I had used select but later I thought of using radio, but just for debugging purpose I did not remove select and never though that will cause issue as the radio first level buttons were working fine.
Here is the select code that was causing the problem:
<div class="form-group">
<label for="inputAddGroupParent">Parent</label>
<select class="form-control" id="inputAddGroupParent" v-model="groupInputtedData.group_parent_id">
<option :value="0">None</option>
<option v-for="groupsNested in groupsDataNested" :value="groupsNested.group_id">{{groupsNested.group_name}} {{groupsNested.group_id}}</option>
</select>
</div>
While debugging I had to create minimal working example, so that I can reproduce the issue, so that someone can help me here in stack overflow but ended have a working code :) So, here is it, feel free to use if someone need it.
let data = [ { "group_id": 36, "group_parent_id": null, "group_name": "Fresno Bee", "group_type_id": 1, "groups": [ { "group_id": 38, "group_parent_id": 36, "group_name": "Test", "group_type_id": 3, "groups": [] } ] }, { "group_id": 21, "group_parent_id": null, "group_name": "Miami Herald", "group_type_id": 1, "groups": [ { "group_id": 28, "group_parent_id": 21, "group_name": "Business", "group_type_id": 3, "groups": [] }, { "group_id": 29, "group_parent_id": 21, "group_name": "Sports", "group_type_id": 3, "groups": [ { "group_id": 34, "group_parent_id": 29, "group_name": "Football", "group_type_id": 3, "groups": [] }, { "group_id": 35, "group_parent_id": 29, "group_name": "Tennis", "group_type_id": 3, "groups": [] } ] } ] }, { "group_id": 23, "group_parent_id": 20, "group_name": "Sacramento Bee", "group_type_id": 1, "groups": [ { "group_id": 30, "group_parent_id": 23, "group_name": "Money", "group_type_id": 3, "groups": [] }, { "group_id": 25, "group_parent_id": 23, "group_name": "Sports", "group_type_id": 3, "groups": [] } ] } ]
Vue.component('AppGroupRadioItem', {
props: {
groups: Object,
inputtedData: Object
},
template: '#group-template'
});
new Vue({
el: '#app',
data() {
return {
groupsDataNested: data,
groupInputtedData: {
group_name: '',
group_type_id: '',
group_parent_id: ''
}
}
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<!--<script src="//unpkg.com/vue#2.4.1"></script>--> <!-- works in 2.4.1 as well -->
<div id="app">
<div class="container">
<div class="row">
<div class="col-6">
<div class="card rounded-0 border-top-0 border-bottom-0">
<app-group-radio-item
v-for="groupsNested in groupsDataNested"
:key="groupsNested.group_id"
:groups="groupsNested"
:inputted-data="groupInputtedData">
</app-group-radio-item>
</div>
</div>
<div class="col-6">
<h3>groupInputtedData: {{groupInputtedData.group_parent_id}}</h3>
</div>
</div>
</div>
</div>
<script type="text/x-template" id="group-template">
<div class="list-group list-group-flush">
<div class="list-group-item">
<div class="form-group">
<label class="custom-control custom-radio">
<input type="radio" class="custom-control-input"
:value="groups.group_id"
v-model="inputtedData.group_parent_id">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">{{groups.group_name}}</span>
</label>
</div>
</div>
<div class="nested-items">
<app-group-radio-item
v-for="groupsNested in groups.groups"
:key="groupsNested.group_id"
:groups="groupsNested"
:inputted-data="inputtedData"
style="padding-left: 40px">
</app-group-radio-item>
</div>
</div>
</script>

accessing nested array in nested object in angular js

I am using angularjs 1.I have a pretty complex json object with a lot of nesting . I want to use ng-repeat on a json to access a nested array.
[{
"information": {
"name": "simdi jinkins",
"phone": "08037775692",
"email": "sim04ful#gmail",
"whatsapp": "8349493420",
"residential": "gwarinpa",
"office": "dansarari plaza"
},
"jobs": [{
"name": "jeans and shirt",
"measurement": {
"shoulder": "34",
"waist": "44",
"neck": "86",
"front": "42",
"length": "33",
"boost": "80",
"cap": "30",
"sleeves": "12",
"tommy": "30",
"thigh": "30",
"chest": "34",
"back": "40"
},
"account": {
"method": "cheque",
"amount": "2334",
"advance": "3945",
"date": "2016-07-22T09:54:06.395Z"
},
"date": {
"incharge": "2016-07-22T09:54:06.395Z",
"collection": "2016-07-22T09:54:06.395Z"
},
"style": "english",
"material": "our"
}, {
"name": "skirt and blouse",
"measurement": {
"shoulder": "35",
"waist": "45",
"neck": "85",
"front": "52",
"length": "53",
"boost": "85",
"cap": "50",
"sleeves": "52",
"tommy": "50",
"thigh": "35",
"chest": "35",
"back": "50"
},
"account": {
"method": "cheque",
"amount": "2334",
"advance": "5045",
"date": "2016-07-22T09:54:06.395Z"
},
"date": {
"incharge": "2016-07-22T09:54:06.395Z",
"collection": "2016-07-22T09:54:06.395Z"
},
"style": "native",
"material": "bought"
}]
}, {
"information": {
"name": "Paula Odama",
"phone": "08034698692",
"email": "paulyd#gmail",
"whatsapp": "8348733420",
"residential": "inpa",
"office": "dansaza"
},
"jobs": [{
"name": "gown",
"measurement": {
"shoulder": "74",
"waist": "44",
"neck": "76",
"front": "42",
"length": "73",
"boost": "80",
"cap": "37",
"sleeves": "72",
"tommy": "30",
"thigh": "70",
"chest": "37",
"back": "70"
},
"account": {
"method": "cheque",
"amount": "2334",
"advance": "3945",
"date": "2016-07-22T09:54:06.395Z"
},
"date": {
"incharge": "2016-07-22T09:54:06.395Z",
"collection": "2016-07-22T09:54:06.395Z"
},
"style": "english",
"material": "our"
}, {
"name": "robes",
"measurement": {
"shoulder": "35",
"waist": "45",
"neck": "85",
"front": "52",
"length": "53",
"boost": "85",
"cap": "50",
"sleeves": "52",
"tommy": "50",
"thigh": "35",
"chest": "35",
"back": "50"
},
"account": {
"method": "cheque",
"amount": "2334",
"advance": "5045",
"date": "2016-07-22T09:54:06.395Z"
},
"date": {
"incharge": "2016-07-22T09:54:06.395Z",
"collection": "2016-07-22T09:54:06.395Z"
},
"style": "native",
"material": "bought"
}]
}];
i am trying to access the name property in jobs i have tried the following
<div ng-repeat="customer in customers" class="card rich-card" z="2">
<div class="card-hero" style="">
<h1>{{customer.jobs.name}} <span>{{}}</span> </h1>
</div>
<div class="divider"></div>
<div class="card-footer">
<button class="button flat">View</button>
<button class="button flat color-orange-500">Explore</button>
</div>
</div>

Because customer.jobs is an array, you must access it using and index or key.
In your example, the way to do this would be using customer.jobs[0].name.
The resulting HTML would like this:
<div ng-repeat="customer in customers" class="card rich-card" z="2">
<div class="card-hero" style="">
<div data-ng-repeat="job in customer.jobs">
<h1>{{job.name}} <span>{{}}</span> </h1>
</div>
</div>
<div class="divider"></div>
<div class="card-footer">
<button class="button flat">View</button>
<button class="button flat color-orange-500">Explore</button>
</div>
</div>
UPDATE
It's an array of customers, with each containing an array of jobs. As such, you need a double repeater to cycle through the first AND second array.
UPDATE 2
I figured you might want a 'card' per job a customer has, that code would be as follows:
<div data-ng-repeat="customer in customers">
<div ng-repeat="job in customer.jobs" class="card rich-card" z="2">
<div class="card-hero" style="">
<h1>{{job.name}} <span>{{}}</span> </h1>
</div>
<div class="divider"></div>
<div class="card-footer">
<button class="button flat">View</button>
<button class="button flat color-orange-500">Explore</button>
</div>
</div>
</div>

You did not explicitly say that your array is called customers, so I am assuming that it is.
You have an array of customers, and each customer has one or more jobs. If you want to display the name of ALL jobs for each customer, you need to use nested ng-repeats. I'm not sure which part of your UI you want to repeat but I'm just going with the 'card-hero' div.
<div ng-repeat="customer in customers" class="card rich-card" z="2">
<h1>{{customer.information.name}}</h1>
<div ng-repeat="job in customer.jobs" class="card-hero" style="">
<h2>{{job.name}} <span>{{}}</span> </h2>
</div>
<div class="divider"></div>
<div class="card-footer">
<button class="button flat">View</button>
<button class="button flat color-orange-500">Explore</button>
</div>
</div>
EDIT: added h1 customer name, and changed job name to h2, to show that each job under each customer is displayed

using underscore in ractive js to sort

I am using ractive js for the templating.
Below is my template
<form data-type="Contractor" id="Contractor">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="box no-shadow box-fullborder no-radius form-section">
<div class="box-header gray-bg">
<h5>Select Postal Code</h5>
</div>
<div class="box-body gray-bg">
<div class="form-group">
<label>Postal Code</label>
<select name="{{postal}}" class="form-control select2 postal" data-placeholder="Select your postal code" >
</select>
</div><!-- /.form-group -->
</div>
</div>
{{#if isPostalSelected}}
<div class="box no-shadow box-fullborder no-radius form-section">
<div class="box-header gray-bg">
<h5>Select Services</h5>
</div>
<div class="box-body gray-bg">
{{#each services}}
<div class="form-group col-md-6 col-sm-12 col-xs-12">
<label>
<input type="checkbox" name="{{ selectedServices }}" value="{{Id}}" class="minimal flat-green"/>
<span>{{Title}}</span>
</label>
{{#if IsMultiple}}
<label>
<input class="timeRange" type="text" name="range_5" value="">
</label>
{{/if}}
</div>
{{/each}}
</div>
</div>
{{/if}}
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="box no-shadow box-fullborder no-radius form-section">
<div class="box-body gray-bg">
<div class="pull-right">
<button type="submit" class="btn btn-sm btn-flat" data-action="savePostal" data-form="Contractor" data-id="Contractor">
Next
</button>
</div>
</div>
</div>
</div>
</form>
And below is my Json which I am passing in the template
{
"selectedServices": [],
"postal": "",
"services": [
{
"BaseTime": 0.5,
"Correction": null,
"Id": "a0M23000000IoabEAC",
"IsMultiple": false,
"serviceOrder": 3,
"Title": "Fridge"
},
{
"BaseTime": 0.5,
"Correction": null,
"Id": "a0M23000000IoagEAC",
"IsMultiple": false,
"serviceOrder": 4,
"Title": "Oven"
},
{
"BaseTime": 0.5,
"Correction": 0.5,
"Id": "a0M23000000IoalEAC",
"IsMultiple": false,
"serviceOrder": 5,
"Title": "Walls"
},
{
"BaseTime": 0.333,
"Correction": null,
"Id": "a0M23000000IoaMEAS",
"IsMultiple": true,
"serviceOrder": 0,
"Title": "Bedrooms"
},
{
"BaseTime": 0.5,
"Correction": 0.5,
"Id": "a0M23000000IoaqEAC",
"IsMultiple": false,
"serviceOrder": 6,
"Title": "Windows"
},
{
"BaseTime": 0.5,
"Correction": null,
"Id": "a0M23000000IoaREAS",
"IsMultiple": true,
"serviceOrder": 1,
"Title": "Bathrooms"
},
{
"BaseTime": 0.333,
"Correction": 0.5,
"Id": "a0M23000000IoavEAC",
"IsMultiple": false,
"serviceOrder": 7,
"Title": "Blinds"
},
{
"BaseTime": 0.5,
"Correction": 0.2,
"Id": "a0M23000000IoaWEAS",
"IsMultiple": false,
"serviceOrder": 2,
"Title": "Cabinets"
}
],
"isPostalSelected": true
}
I want to sort column of services by serviceOrder.
I tried using example given by ractive but failed :(
Below is my javascript code for render ractive template
cerateBookingForm = function(){
var d = $.Deferred();
bookingForm = new Ractive({
el: '#bookingForm',
template: '#FF_Booking_Form',
data: $.Circle.Varriables.BookingForm,
testMethod : function(){
console.log('test');
console.log(data);
},
onrender : function(data){
console.log('rendered');
d.resolve(data);
},
onupdate : function(){
$.Circle.App.Ui.checkbox();
$.Circle.App.Ui.timeRange();
}
});
return d;
}
cerateBookingForm();
Can anyone help me how to achieve this ?

You can include underscore on your data object, either inline with the rest of the data:
data: {
_: _,
selectedServices: _,
...
}
Or you can also put on the prototype if you want to use in all components or to keep your data get encapsulated in $.Circle.Varriables.BookingForm:
Ractive.protototype.data = { _: _ }
Then you can just use it directly in your template:
{{#each _.sortBy(services, 'serviceOrder')}}
<!-- block content -->
{{/each}}
You can also make it dynamic by using a reference:
{{#each _.sortBy(services, sortBy)}}
var r = new Ractive({
el: document.body,
template: '#template',
data: {
"sortBy": 'serviceOrder',
"_": _,
"selectedServices": [],
"postal": "",
"services": [{
"BaseTime": 0.5,
"Correction": null,
"Id": "a0M23000000IoabEAC",
"IsMultiple": false,
"serviceOrder": 3,
"Title": "Fridge"
}, {
"BaseTime": 0.5,
"Correction": null,
"Id": "a0M23000000IoagEAC",
"IsMultiple": false,
"serviceOrder": 4,
"Title": "Oven"
}, {
"BaseTime": 0.5,
"Correction": 0.5,
"Id": "a0M23000000IoalEAC",
"IsMultiple": false,
"serviceOrder": 5,
"Title": "Walls"
}, {
"BaseTime": 0.333,
"Correction": null,
"Id": "a0M23000000IoaMEAS",
"IsMultiple": true,
"serviceOrder": 0,
"Title": "Bedrooms"
}, {
"BaseTime": 0.5,
"Correction": 0.5,
"Id": "a0M23000000IoaqEAC",
"IsMultiple": false,
"serviceOrder": 6,
"Title": "Windows"
}, {
"BaseTime": 0.5,
"Correction": null,
"Id": "a0M23000000IoaREAS",
"IsMultiple": true,
"serviceOrder": 1,
"Title": "Bathrooms"
}, {
"BaseTime": 0.333,
"Correction": 0.5,
"Id": "a0M23000000IoavEAC",
"IsMultiple": false,
"serviceOrder": 7,
"Title": "Blinds"
}, {
"BaseTime": 0.5,
"Correction": 0.2,
"Id": "a0M23000000IoaWEAS",
"IsMultiple": false,
"serviceOrder": 2,
"Title": "Cabinets"
}]
}
});
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js'></script>
<script src='http://cdn.ractivejs.org/edge/ractive.min.js'></script>
<script id='template' type='text/ractive'>
{{#each services.0:key}}
<div><label><input type='radio' name='{{~/sortBy}}' value='{{key}}'> {{key}}</label></div>
{{/each}}
{{#each _.sortBy(services, sortBy)}}
<div class="form-group col-md-6 col-sm-12 col-xs-12">
<label>
<input type="checkbox" name="{{ ~/selectedServices }}" value="{{Id}}" class="minimal flat-green" />
<span>{{Title}}</span>
</label>
{{#if IsMultiple}}
<label>
<input class="timeRange" type="text" name="range_5" value="">
</label>
{{/if}}
</div>
{{/each}}
</script>

Show html elements based on object property in Angular JS

This is my code for showing simple drop down list
var products = [
{
"id": 1,
"name": "Product 1",
"price": 2200,
"category": "c1"
},
{
"id": 1,
"name": "Product 2",
"price": 2200,
"category": "c2"
},
{
"id": 1,
"name": "Product 3",
"price": 2200,
"category": "c1"
},
{
"id": 1,
"name": "Product 4",
"price": 2200,
"category": "c3"
},
{
"id": 1,
"name": "Product 5",
"price": 2200,
"category": "c3"
}
];
<div ng-repeat="product in products" class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li ng-repeat="product in products">{{product.name}}</li>
</ul>
</div>
I want to show drop down list based on category, if there are 3 categories in object I want 3 drop down list with their products showing inside their drop down list if 2 category then 2 drop down lists and so on.
Can anyone help me how to achieve this? I am new to Angular.
Thank you

The tip in the comments to the other SO question is really helpful.
You could do it with the mentioned library with $scope.categories = $filter('groupBy')($scope.products, 'category') in your controller or with ng-repeat="(group, cat) in ( products | groupBy : 'category')" in your markup.
Please have a look at the demo below or in this fiddle.
angular.module('demoApp', ['ui.bootstrap', 'angular.filter'])
.controller('mainController', function ($scope, $filter) {
$scope.products = [{
"id": 1,
"name": "Product 1",
"price": 2200,
"category": "c1"
}, {
"id": 2,
"name": "Product 2",
"price": 2200,
"category": "c2"
}, {
"id": 3,
"name": "Product 3",
"price": 2200,
"category": "c1"
}, {
"id": 4,
"name": "Product 4",
"price": 2200,
"category": "c3"
}, {
"id": 5,
"name": "Product 5",
"price": 2200,
"category": "c3"
}];
$scope.categories = $filter('groupBy')($scope.products, 'category');
console.log($scope.categories);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.js"></script>
<script src="https://cdn.rawgit.com/a8m/angular-filter/master/dist/angular-filter.js"></script>
<div ng-app="demoApp" ng-controller="mainController">
<div class="dropdown" dropdown>
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" dropdown-toggle>Select products<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="product in products">{{product.name}}</li>
</ul>
</div>
<div dropdown>
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" dropdown-toggle>Select category<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="(group, cat) in categories">
<!--{{group}}
{{cat}}-->
<strong>category: {{group}}</strong>
{{item.name}}
</li>
</ul>
</div>
</div>

AngularJS ng-repeat: show data only when data is not false

I am using angular in an application and I'm showing data in my html page like this:
<div class="orderspresent" ng-cloak="">
<div class="roworders" ng-controller="allorders" >
<div class="col-md-3" ng-repeat= "o in orders">
<div class="sm-st clearfix">
<div class="sm-st-info">
<i class="fa fa-square"></i>
<span>{{o.customerName}}</span>
<p>1 minutes</p>
<ul>
<li ng-repeat= "details in o.details">
{{details.aantal}} x {{details.productTitle}}
<br>+ {{details.extras}}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
JSON SAMPLE
{
"49": {
"orderID": 49,
"customerID": 61,
"orderDate": "2015-05-06 10:03:05",
"orderDeliveryDate": "2015-05-06",
"orderStatus": "prepare",
"customerName": "Caroline",
"details": [
{
"orderdetailID": 83,
"productTitle": "Sexy Teacher",
"productPrijs": 4,
"aantal": 2,
"extras": "Extra syrup, Soya milk",
"extrasPrice": 0.6
},
{
"orderdetailID": 84,
"productTitle": "Caramel Macchiato",
"productPrijs": 5.2,
"aantal": 2,
"extras": false,
"extrasPrice": 0
},
{
"orderdetailID": 85,
"productTitle": "The Coach",
"productPrijs": 3,
"aantal": 3,
"extras": false,
"extrasPrice": 0
},
{
"orderdetailID": 86,
"productTitle": "The Virgin",
"productPrijs": 3.2,
"aantal": 5,
"extras": "Extra syrup, Whipped cream, 3 espresso shots",
"extrasPrice": 2.4
}
]
}
}
As you can see in the JSON sample above the {{details.extras}} value can sometimes be false. So now when I'm using {{details.extra}} it shows false in my html. But in that case I don't want anything to be shown there. Just blank.
How can this be accomplished?

The best option for it is use ng-if:
<span ng-if="details.extras">+ {{details.extras}}<span>
ng-if removes node from DOM. Smaller DOM - faster operations.

Try using ng-show:
<br><span ng-show="details.extras">+ {{details.extras}}<span>