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>

Changing ng-model for input inside ng-repeat based on content

I have an exercise where I have to be able to customise some options of a laptop. I'm loading this options from the database. There are four possible options: RAM,Processor,Video,Screen. For the input model, I would like to set the ng-model respectively.
<div class="text-center">
<div class="marginTop">
<p>{{laptop.selected.text}}</p>
<div class="row" ng-repeat="x in laptop.customize">
<div class="col-xs-3">
<p>{{x.name}}</p>
</div>
<div class="col-xs-9">
<label class="radio-inline" ng-repeat="y in x.options">
<input type="radio" name="{{x.name}}" ng-model="laptop.selected.{{x.name}}" ng-value="y.description"> {{y.description}}
</label>
</div>
</div>
<div class="col-xs-12">
En door
</div>
</div>
The goal would be to set ng-model="laptop.selected.RAM" or ng-model="laptop.selected.Processor" , but I can't find any way to do so.
Excuse my html, I'm a noob.
[edit]
JSON in laptop.customize
[
{
"name": "RAM",
"options": [
{
"id": 1,
"description": "4gb",
"customizationlaptopid": 1,
"pricedifference": -50
},
{
"id": 2,
"description": "6gb",
"customizationlaptopid": 1,
"pricedifference": 0
},
{
"id": 3,
"description": "8gb",
"customizationlaptopid": 1,
"pricedifference": 100
}
]
},
{
"name": "Processor",
"options": [
{
"id": 4,
"description": "i3 2.3Ghz",
"customizationlaptopid": 2,
"pricedifference": -100
},
{
"id": 5,
"description": "i5 2.7Ghz",
"customizationlaptopid": 2,
"pricedifference": 0
},
{
"id": 6,
"description": "i7 3.2GHz",
"customizationlaptopid": 2,
"pricedifference": 150
}
]
},
{
"name": "Video",
"options": [
{
"id": 7,
"description": "NVidia 720M 1GB",
"customizationlaptopid": 3,
"pricedifference": -100
},
{
"id": 8,
"description": "Nvidia 740N 2GB",
"customizationlaptopid": 3,
"pricedifference": 0
},
{
"id": 9,
"description": "Nvidia 980NX 6GB",
"customizationlaptopid": 3,
"pricedifference": 200
}
]
}
]

You just set like this, since you already hold the values in y, also you can get the selected value using ng-change
<div class="marginTop">
<p>{{laptop.selected.text}}</p>
<div class="row" ng-repeat="x in laptop.customize">
<div class="col-xs-3">
<p>{{x.name}}</p>
</div>
<div class="col-xs-9">
<label class="radio-inline" ng-repeat="y in x.options">
<input type="radio" name="{{x.name}}" ng-model="laptop.selected[y.name]" ng-change="getselected(y)" ng-value="y.description"> {{y.description}}
</label>
</div>
</div>
<div class="col-xs-12">
En door
</div>
</div>
DEMO

Carousel in angular

A carousel say "Cr1" is displaying the category. I have another carousel beneath it say "Cr2" which is displaying the products based on the category clicked from "Cr1". The value for both are populated from a single JSON. Now my problem is I am unable to display the product in the "Cr2". Need help with that
/**
* Created by Sneha_Subhash on 6/10/2016.
*/
var myApp = angular.module('myApp', []);
myApp.controller("MasterDetailCtrl", function($scope, $http) {
$scope.categoryList = [{
"id": "1",
"name": "Banking",
"productList": [{
"productId": "x10001",
"productName": "Direct Deposit",
"categoryid": {
"id": "1",
"name": "banking"
},
"productURL": "http://bankonsanfrancisco.com/why",
"productDesc": "High drama ensued after the emergency landing of a Mangaluru-bound " +
"Jet Airways flight that took off from Kempegowda International Airport (KIA) on Wednesday morning. Fortunately, " +
"none of the passengers or crew members were injured. They were all evacuated to safety.The flight made an emergency" +
" landing at KIA 15 minutes after the take off after smoke was detected in the cabin and an engine caught up in flames. " +
"Jet Airways said that the flight then came back to KIA for an emergency landing. Soon after landing, the Aircraft Rescue and Fire-fighting Team at KIA rushed to the aircraft and evacuated all the 65 passengers and four crew members on board.Ajeet Khare, Managing Director, Canara Lightings, Mangaluru, was one of the passengers, who was flying with his wife.",
"createddate": "9\/18\/1996",
"updateddate": "9\/18\/2015",
"documents": [{
"link1": "url1",
"link2": "url2",
"link3": "url3"
}],
"videos": [{
"link1": "url1",
"link2": "url2"
}],
"screenshot": [{
"link1": "img1",
"link2": "img2"
}],
"bgimage": "https://images.unsplash.com/photo-1462146449396-2d7d4ba877d7?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=c219903b4e38c5b8109e11a3d33b9748"
}, {
"productId": "x10002",
"productName": "Individual Banking",
"categoryid": {
"id": "1",
"name": "banking"
},
"productURL": "https://www.google.co.in/search?sourceid=chrome-psyapi2&ion=1&espv=2&ie=UTF-8&q=individual%20banking&oq=individual%20banking&aqs=chrome..69i57j0l5.4255j0j7",
"productDesc": "Short Desc",
"createddate": "9\/18\/1996",
"updateddate": "9\/18\/2015",
"documents": [{
"link1": "url1",
"link2": "url2",
"link3": "url3"
}],
"videos": [{
"link1": "url1",
"link2": "url2"
}],
"screenshot": [{
"link1": "img1",
"link2": "img2"
}],
"bgimage": "https://images.unsplash.com/photo-1462726625343-6a2ab0b9f020?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=eb6506972ee7685166b2d8b649d29a1b"
}, {
"productId": "x10003",
"productName": "Business Banking",
"categoryid": {
"id": "1",
"name": "banking"
},
"productURL": "http://bankonsanfrancisco.com/why",
"productDesc": "Short Desc",
"createddate": "9\/18\/1996",
"updateddate": "9\/18\/2015",
"documents": [{
"link1": "url1",
"link2": "url2",
"link3": "url3"
}],
"videos": [{
"link1": "url1",
"link2": "url2"
}],
"screenshot": [{
"link1": "img1",
"link2": "img2"
}],
"bgimage": "https://images.unsplash.com/photo-1462910211773-a9847b1f0e40?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=600fdca8f6340569864d4f94f5f9dfc1"
}, {
"productId": "x10004",
"productName": "Digital Banking",
"categoryid": {
"id": "1",
"name": "banking"
},
"productURL": "https://localfirstbank.com/business/",
"productDesc": "Online banking, also known as internet banking, e-banking or virtual banking, is an electronic payment system that enables customers of a bank or other financial institution to conduct a range of financial transactions through the financial institution's website. The online banking system will typically connect to or be part of the core banking system operated by a bank and is in contrast to branch banking which was the traditional way customers accessed banking services. Fundamentally and in mechanism, online banking, internet banking and e-banking are the same thing.",
"createddate": "9\/20\/1996",
"updateddate": "1\/20\/2015",
"documents": [{
"link1": "url1",
"link2": "url2",
"link3": "url3"
}],
"videos": [{
"link1": "url1",
"link2": "url2"
}],
"screenshot": [{
"link1": "img1",
"link2": "img2"
}],
"bgimage": "https://images.unsplash.com/photo-1464054313797-e27fb58e90a9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=576bb45620043f729baef96301c9acb6"
}]
}, {
"id": "2",
"name": "Insurance",
"productList": [{
"productId": "x10005",
"productName": "Embee Ins. Brokers Ltd.",
"categoryid": {
"id": "2",
"name": "Insurance"
},
"productURL": "http://www.embeegroup.in/",
"productDesc": "Embee Financial Services Ltd. is an integrated 'Niche' financial services group that provides full range of corporate advisory services to its clients. The services provided include one stop solution to the Corporate & SMEs in areas of Corporate Finance & Investment Banking, Management Consulting, Wealth Management, Legal & Statutory services & Insurance Broking.",
"createddate": "9\/20\/1896",
"updateddate": "1\/20\/2014",
"documents": [{
"link1": "url1",
"link2": "url2",
"link3": "url3"
}],
"videos": [{
"link1": "url1",
"link2": "url2"
}],
"screenshot": [{
"link1": "img1",
"link2": "img2"
}],
"bgimage": "https://images.unsplash.com/photo-1464400694175-33544b41703d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=680f4a54596d9fa9f20a029e297b1360"
}, {
"productId": "x10006",
"productName": "Excellent Insurance Broking Services Ltd.",
"categoryid": {
"id": "2",
"name": "Insurance"
},
"productURL": "http://www.excellentinsurancebroking.com/",
"productDesc": "Excellent Insurance Broking Services Ltd is one of the leading insurance broking firms that operate on both direct and reinsurance broking licenced & regulated by IRDAI. Backed by more than a decade of experience and a team of highly qualifiedand professionals from Insurance, Reinsurance, Engineering, Finance, Medicine, IT,Legal and Investigation fields. We are based in Hyderabad, India, with a branch in Bangalore is positioned to handle all insurance and reinsurance requirements through exclusive networks of national and international associates and underwriters. We give innovative solutions with highest competence. EIBSL works closely with insurers to negotiate competitive rates to meet the needs of both existing and potential clients.",
"createddate": "9\/20\/1996",
"updateddate": "1\/20\/2015",
"documents": [{
"link1": "url1",
"link2": "url2",
"link3": "url3"
}],
"videos": [{
"link1": "url1",
"link2": "url2"
}],
"screenshot": [{
"link1": "img1",
"link2": "img2"
}],
"bgimage": "https://images.unsplash.com/photo-1465152251391-e94453ee3f5a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=2f3699fc4dbc682fbecdc4fa4d5f6cad"
}]
}, {
"id": "3",
"name": "Automobile",
"productList": [{
"productId": "x10007",
"productName": "Ford Model T",
"categoryid": {
"id": "3",
"name": "Automobile"
},
"productURL": "https://en.wikipedia.org/wiki/Ford_Model_T",
"productDesc": "The first car to achieve one million, five million, ten million and fifteen million units sold. By 1914, it was estimated that nine out of every ten cars in the world were Fords",
"createddate": "9\/20\/1908",
"updateddate": "1\/20\/2015",
"documents": [{
"link1": "url1",
"link2": "url2",
"link3": "url3"
}],
"videos": [{
"link1": "url1",
"link2": "url2"
}],
"screenshot": [{
"link1": "img1",
"link2": "img2"
}],
"bgimage": "http:\/\/www.pmbl-ng.com\/images\/about.jpg"
}, {
"productId": "x10008",
"productName": "Volkswagen Beetle",
"categoryid": {
"id": "3",
"name": "Automobile"
},
"productURL": "https://en.wikipedia.org/wiki/Volkswagen_Beetle",
"productDesc": "The need for this kind of car, and its functional objectives, were formulated by Joseph Ganz, an engineer whose ideas influenced Adolf Hitler after he saw the car at an auto show. The leader of Nazi Germany wished for a cheap, simple car to be mass-produced for the new road network of his country. He contracted Ferdinand Porsche in 1934 to design and build it, after telling him in 1933 ",
"createddate": "9\/20\/1938",
"updateddate": "1\/20\/2015",
"documents": [{
"link1": "url1",
"link2": "url2",
"link3": "url3"
}],
"videos": [{
"link1": "url1",
"link2": "url2"
}],
"screenshot": [{
"link1": "http://images.unsplash.com/photo-1454447170982-596ddff4606a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=98aa2bb815b9839f16822ecdd38e28ae",
"link2": "http://images.unsplash.com/photo-1452215199360-c16ba37005fe?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=408c70a6e88b50949c51e26424ff64f3"
}],
"bgimage": "http://images.unsplash.com/photo-1459902552792-28b7925b06c2?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=999e6d0ae0e189e1959b31677f5a9848"
}, {
"productId": "x10009",
"productName": "Toyota Corolla",
"categoryid": {
"id": "3",
"name": "Automobile"
},
"productURL": "https://en.wikipedia.org/wiki/Toyota_Corolla",
"productDesc": "The Toyota Corolla is a line of subcompact and compact cars manufactured by Toyota. Introduced in 1966, the Corolla was the best-selling car worldwide by 1974[1] and has been one of the best-selling cars in the world since then. In 1997, the Corolla became the best selling nameplate in the world, surpassing the Volkswagen Beetle.[2] Toyota reached the milestone of 40 million Corollas sold over eleven generations in July 2013.[3] The series has undergone several major redesigns. The name Corolla is part of Toyota's naming tradition of using names derived from the Toyota Crown for sedans. The Corolla has always been exclusive in Japan to Toyota Corolla Store locations, and manufactured in Japan with a twin, called the Toyota Sprinter until 2000. In Japan and much of the world, the hatchback companion since 2006 is called the Toyota Auris. Prior to the Auris, Toyota used the Corolla name on the hatchback bodystyle in various international markets.",
"createddate": "9\/20\/1966",
"updateddate": "1\/20\/2015",
"documents": [{
"link1": "url1",
"link2": "url2",
"link3": "url3"
}],
"videos": [{
"link1": "url1",
"link2": "url2"
}],
"screenshot": [
"http://images.unsplash.com/photo-1427464407917-c817c9a0a6f6?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=812662922febc6b1006719224d6c3772",
"http://images.unsplash.com/photo-1452215199360-c16ba37005fe?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=408c70a6e88b50949c51e26424ff64f3"
],
"bgimage": "http://images.unsplash.com/photo-1436262513933-a0b06755c784?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=0b6cf0f2bd64f9788f12b2b43c959c11"
}]
}
];
$scope.selectedProduct = $scope.categoryList[0].productList[0].productId;
// $scope.productId = $scope.selectedProduct.productId;
$scope.selectedCategory = $scope.categoryList[0].id;
$scope.selectProduct = function(val) {
//$scope.selectedProduct = val;
$scope.selectedCategory = val;
$scope.loadProducts();
}
$scope.loadProducts = function() {
$scope.listOfProducts = null;
// $scope.listOfProducts = $scope.selectedProduct;
$scope.listOfProducts = $scope.selectedCategory;
}
});
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="carousel.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
.carousel-inner{
height: 500px;
}
/* .scrolls {
overflow-x: scroll;
overflow-y: hidden;
height: 80px;
white-space:nowrap
}*/
</style>
</head>
<body ng-controller="MasterDetailCtrl" class="w3-container">
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/vase.jpg" alt="Chania" width="460" height="300">
<div class="carousel-caption">
<h3>Vase</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="images/shell.jpg" alt="Chania" width="460" height="300">
<div class="carousel-caption">
<h3>Sea Shell</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="images/turtle.jpg" alt="Flower" width="460" height="300">
<div class="carousel-caption">
<h3>Turtle</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="images/elephant.jpg" alt="Flower" width="460" height="300">
<div class="carousel-caption">
<h3>Elephant</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="well text-center">
Purposeful AI, when applied to the enterprise, can unlock human potential and amplify people’s ability to do more. To realize this, organizations need to be able to do three things: manage organizational knowledge, apply it to automate enterprise processes, and utilize the massive intelligence hidden away in systems, machines and people.
Infosys Mana is a knowledge-based AI platform. It brings machine learning together with the deep knowledge of an organization to drive automation and innovation. This enables businesses to continuously reinvent their system landscapes. Mana, with the Infosys AiKiDo service offerings, dramatically lowers the cost of maintenance for both physical and digital assets. It captures the knowledge and know-how of people across fragmented and complex systems, and simplifies the continuous renovation of core business processes. Mana also enables businesses to bring new, delightful user experiences leveraging state-of-the-art technology.
</div>
<div class="well">
<header>
<ul class="nav nav-pills nav-justified scrolls">
<li data-target="#myCarousel" data-slide-to="0" class="active">
About<small>Lorem ipsum dolor sit</small>
</li>
<li ng-repeat="category in categoryList"><a href="#"><i class="fa fa-home" ng-click="selectproduct(category);"></i>
{{category.name}}</a>
</li>
</ul>
</header>
<div class = "well" id ="productDetails">
<div class="productCard">
<div class="w3-card-4" style="width:30%;" ng-repeat="product in categoryList.productList"-->
<header class="w3-container w3-blue">
<h1>Header{{product.productName}}</h1>
</header>
<div class="w3-container">
<p>{{product.productDesc}}</p>
<p><button class="w3-btn w3-dark-grey">Button</button></p>
</div>
<footer class="w3-container w3-blue">
<h5> <a ng-href="{{selectedProduct.productURL}}">{{selectedProduct.productURL}}</a></h5>
</footer>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

check this , your question is unclear , in this fix the carousel please check
https://plnkr.co/edit/tJKid1pCREnRP9iMvP2n?p=preview
add your css
.carousel-caption {
position: inherit !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
}

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>

bootstrap carousel does not work with handelbars (prev button )

I'm using bootstrap v3
the process works fine without using js template , once I'm using handelbars , the previous button will crash and throw error ( Uncaught TypeError: Cannot read property 'slice' of undefined ) with index position is 0 I guess
the problem occur while transition from the first element to the last element using previous button of course , the 'active class is lost somewhere'
could anyone help
here is my html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<div id="carouselWrap" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carouselWrap" data-slide-to="0" class="active"></li>
<li data-target="#carouselWrap" data-slide-to="1"></li>
<li data-target="#carouselWrap" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<script id="template" type="text/x-handlebars-template">
{{#each this}}
{{#if counter}}
<div class="item active">
{{else}}
<div class="item ">
{{/if}}
<table>
<tbody>
<tr>
<td> {{product1.name}} {{decode product1.surname}}</td>
<td>{{price product1.lastprice}} </td>
<td>{{decodeproduct1.supplier}} </td>
<td>{{product1.nation}} </td>
<td>{{product1.sport}} </td>
<td>{{product1.divStart}} - {{product1.divEnd}} </td>
<td>{{{decode product1.divScenarioGood}}}</td>
<td>link</td>
</tr>
<tr>
<td>{{product2.name}} {{decode product2.surname}}</td>
<td>{{price product2.lastprice}} </td>
<td>{{decode product2.supplier}} </td>
<td>{{product2.nation}} </td>
<td>{{product2.sport}} </td>
<td>{{product2.divStart}} - {{product1.divEnd}} </td>
<td>{{decode product2.divScenarioGood}}</td>
<td>link</td>
</tr>
</tbody>
</table>
</div>
{{/each}}
</script>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carouselWrap" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carouselWrap" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script>
(function() {
var Hbs = {
init: function( config ) {
this.url = config.url;
this.container = config.container;
this.template = config.template;
this.fetch();
},
fetch: function() {
var self = this;
$.getJSON( self.url, function( data ) {
var template = Handlebars.compile( self.template );
Handlebars.registerHelper('toLowerCase', function(str) {
return str.toLowerCase();
});
Handlebars.registerHelper('price', function(val) {
return Math.round(val);
});
Handlebars.registerHelper('elmId', function(id) {
return id;
});
Handlebars.registerHelper('decode', function(str) {
try{
return decodeURIComponent(escape(str));
}catch(e){
// catch the error
console.log(e.message);
}
});
var positionCounter = 0;
Handlebars.registerHelper('counter', function() {
positionCounter++;
if (positionCounter == 1 )
return positionCounter;
else
return false;
});
self.container.append( template( data ) );
});
}
}
Hbs.init({
url : 'athletes.json',
container: $('.carousel-inner'),
template: $('#template').html()
});
})();
</script>
</body>
</html>
athletes.json
[
{
"#class": "com.tradeinsports.domain.product.ProductPair",
"product1": {
"#class": "com.tradeinsports.domain.product.ProductSubset",
"name": "Alexander",
"surname": "Bj\u00c3\u00b6rk",
"shortname": "A Bj\u00c3\u00b6rk",
"sport": "Golf",
"nation": "Sweden",
"supplier": "V\u00c3\u00a4xj\u00c3\u00b6 GK",
"status": "Locked",
"lastprice": 50.497987979,
"divStart": "2012-07-19",
"divEnd": "2013-12-25",
"contractType": "Travprodukt standard",
"divScenarioGood": "Topp 10 p\u00c3\u00a5 European tour 2016\r\n",
"divScenarioGoodRevenue": -10000,
"smallImage": "litenNyBjork.jpg"
},
"product2": {
"#class": "com.tradeinsports.domain.product.ProductSubset",
"name": "Felix",
"surname": "Rosenqvist",
"shortname": "F Rosenqvist",
"sport": "Motor",
"nation": "Sweden",
"supplier": "Mercedes",
"status": "Locked",
"lastprice": 100,
"divStart": "2012-12-29",
"divEnd": "2021-02-24",
"contractType": "Motor standard",
"divScenarioGood": "4 s\u00c3\u00a4songer i Formel 1 fram till 2021\r\n",
"divScenarioGoodRevenue": 12960,
"smallImage": "FelixFarg.jpg"
}
},
{
"#class": "com.tradeinsports.domain.product.ProductPair",
"product1": {
"#class": "com.tradeinsports.domain.product.ProductSubset",
"name": "sabri",
"surname": "zouari",
"shortname": "Wild Life",
"sport": "Trotting",
"nation": "Sweden",
"supplier": "R Bj\u00c3\u00b6rkroth",
"status": "Locked",
"lastprice": 200,
"divStart": "2014-04-16",
"divEnd": "2016-05-14",
"contractType": "Travprodukt standard",
"divScenarioGood": "2.000.000 i insprugna prispengar + 5.000.000 fr\u00c3\u00a5n f\u00c3\u00b6rs\u00c3\u00a4ljning\r\n",
"divScenarioGoodRevenue": 27900,
"smallImage": "wildLifeProd2.jpg"
},
"product2": {
"#class": "com.tradeinsports.domain.product.ProductSubset",
"name": "Rasmus",
"surname": "Lindh",
"shortname": "R Lindh",
"sport": "Motor",
"nation": "Sweden",
"supplier": "Captimax",
"status": "Locked",
"lastprice": 100,
"divStart": "2019-01-01",
"divEnd": "2029-12-15",
"contractType": "Motor Total",
"divScenarioGood": "10 s\u00c3\u00a4songer i Formel 1 fram till 2029\r\n",
"divScenarioGoodRevenue": 4840,
"smallImage": "rasmusSmallSyst.jpg"
}
},
{
"#class": "com.tradeinsports.domain.product.ProductPair",
"product1": {
"#class": "com.tradeinsports.domain.product.ProductSubset",
"name": "Andreas",
"surname": "Siljestr\u00c3\u00b6m",
"shortname": "A Siljestr\u00c3\u00b6m",
"sport": "Tennis",
"nation": "Sweden",
"supplier": "KLTK",
"status": "Market",
"lastprice": 100,
"divStart": "2013-12-01",
"divEnd": "2016-12-01",
"contractType": "Tennis",
"divScenarioGood": "Topp 10 ATP dubbelranking 2016\r\n",
"divScenarioGoodRevenue": 1050,
"smallImage": "siljestromLiten.jpg"
},
"product2": {
"#class": "com.tradeinsports.domain.product.ProductSubset",
"name": "Gabriel",
"surname": "Axell",
"shortname": "G Axell",
"sport": "Golf",
"nation": "Sweden",
"supplier": "Vadstena GK",
"status": "Market",
"lastprice": 100,
"divStart": "2014-04-15",
"divEnd": "2018-04-15",
"contractType": "Travprodukt standard",
"divScenarioGood": "Topp 10 p\u00c3\u00a5 Europatouren 2017",
"divScenarioGoodRevenue": 1990,
"smallImage": "litenGabbeSyst.jpg"
}
}
]

I have had the same problem with Django template system but i solved rewriting the if statement like this (assuming that counter starts in 1)
{{#if counter = 1}}
<div class="item active">
{{else}}
<div class="item ">
{{/if}}

I had the same problem and did looking for solution several hour, but it was ... little mistake - my controls was in div class="item" inside.))) Be sure that controls are outside couresel's item