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>
Related
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
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
i have
in html its looks like:
<ul class="filter-ul">
<li class="filter-li">
<span class="filter-title">Все бренды</span>
<ul class="filter-ul" ng-repeat="brand in vendors |filter:query_brand">
<li class="filter-li">{{ brand.name }}</li>
</ul>
</li>
</ul>
One item in my Json looks like this:
{
"name": "Bra by Joseline",
"category": null,
"price": 8370.0,
"old_price": 8370.0,
"vendor": {
"id": 1,
"name": "Agent Provocateur",
"seo_name": ""
},
"recommended": [],
"id": 750
}
i want filtering my items by "vendor.name" field and i have no idea how make it reality, its my first expirience in angularJS, sorry for noob question :)
My controller look like this:
(function () {
'use strict';
angular
.module('beo.products.controllers')
.controller('ProductsListController', ProductsListController);
ProductsListController.$inject = ['$scope', '$http'];
function ProductsListController($scope, $http) {
$scope.setMainClasses('catalog-page');
activate();
function activate() {
$http.get('api/v1/products/').success(function(data) {
$scope.products = data;
$scope.ProductSortLeft = '-id'; //по умолчанию фильтроваться будут по обновлению
});
$http.get('api/v1/categories/').success(function(data) {
$scope.categories = data;
});
$http.get('api/v1/shops/').success(function(data) {
$scope.shops = data;
});
$http.get('api/v1/vendors/').success(function(data) {
$scope.vendors = data;
});
}
}
})();
I use filter columns like these:
<filter></filter>
<!-- CATALOG -->
<div class="catalog-main" id="catalog">
<div class="catalog-result-options hidden-xs">
<div class="result-alert" id="result-show-modal">Уведомление о рапродаже</div>
<select class="selectpicker" ng-model="ProductSortLeft">
<option value="-price">Самые дорогие</option>
<option value="price">Самые дешевые</option>
<option value="click_count">Популярные</option>
<option value="-id">Новые</option>
</select>
</div>
<div class="catalog-item" ng-repeat="product in products | orderBy:ProductSortLeft">
<div class="item-pre-title">
Бесплатная доставка $150+
</div>
<div class="item-img">
<a href="/products/{{ product.id }}/"><img ng-src="{{ product.picture[0].external_img_url }}" width="150px"
height="150px" alt=""></a>
</div>
{{ product.name }}
<div class="item-price">
<div class="price-old">{{ product.old_price }}</div>
<b>{{ product.price }}</b>
</div>
<div class="item-footer">
<div class="item-sales-alert">
Получить скиду
</div>
</div>
</div >
You can filter on vendor.name like this:
var app = angular.module('myapp', []);
app.controller('myctrl', function($scope) {
$scope.filter = "";
$scope.brands = [{
"name": "Bra by Joseline",
"category": null,
"price": 8370.0,
"old_price": 8370.0,
"vendor": {
"id": 1,
"name": "Agent Provocateur",
"seo_name": ""
},
"recommended": [],
"id": 750
}, {
"name": "Another brand",
"category": null,
"price": 8370.0,
"old_price": 8370.0,
"vendor": {
"id": 1,
"name": "Agent Bond",
"seo_name": ""
},
"recommended": [],
"id": 750
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="myctrl">
<input ng-model="filter" placeholder="filter" />
<ul class="filter-ul" ng-repeat="brand in brands | filter: {vendor: {name: filter}}">
<li class="filter-li">{{ brand.name }}</li>
</ul>
</div>
my html code is below for reviewans page :-
<div class="all_ques_back col-md-12" ng-init="result()" ng-repeat="ans in correctAns">
<div class="col-xs-1 col-md-1"><i class="fa fa-check-square fa-2x col_padd right_ans_font"></i></div>
<div class="col-xs-9 col-md-10 col_padd">
<div class="all_ques">hello your ans {{ans}}</div>
</div>
<div class="col-xs-1 col-md-1 col_padd"><i class="fa fa-angle-right right_arrow "></i></div>
and my controller code is like :-
var data = angular.module('App', ['ngRoute']);
data.controller('SmartLearnerController', function($scope, $location) {
$scope.result = function() {
$scope.correctAns = [{
"QuestionID": "1",
"QuestionLabel": "Why are mirrors often slightly curved (convex) ?",
"Image": "zibra-crossing.jpg",
"Correct": "two",
"Explaination": "Question one explaination is goes here"
}, {
"QuestionID": "2",
"QuestionLabel": "You are about to drive home. You feel very tired and have a severe headache. You should ?",
"Image": "",
"Correct": "one",
"Explaination": "Question two explaination is goes here"
}, {
"QuestionID": "3",
"QuestionLabel": "While you are driving on gra dient roads,you should ?",
"Image": "sign traffic.jpg",
"Correct": "one",
"Explaination": "Question three explaination is goes here"
}, {
"QuestionID": "4",
"QuestionLabel": "When child lock is applied in car ?",
"Image": "",
"Correct": "two",
"Explaination": "Question four explaination is goes here"
}]
$location.path("/reviewans");
}
});
Please check working example : DEMO
Just move ng-init to above tag
i.e
<body ng-controller="MainCtrl" ng-init="result()" >
<div class="all_ques_back col-md-12" ng-repeat="ans in correctAns">
<div class="col-xs-1 col-md-1"><i class="fa fa-check-square fa-2x col_padd right_ans_font"></i></div>
<div class="col-xs-9 col-md-10 col_padd">
<div class="all_ques">hello your ans {{ans}}</div>
</div>
<div class="col-xs-1 col-md-1 col_padd"><i class="fa fa-angle-right right_arrow "></i></div>
</div>
#Nimesh i moved ng-init to ng-controller div and changed {{ans}} to {{ans.QuestionLabel}}
Html :-
<div ng-app="myApp" ng-controller="Ctrl" ng-init="result()">
<div class="all_ques_back col-md-12" ng-repeat="ans in correctAns">
<div class="col-xs-1 col-md-1"><i class="fa fa-check-square fa-2x col_padd right_ans_font"></i></div>
<div class="col-xs-9 col-md-10 col_padd">
<div class="all_ques">hello your ans {{ans.QuestionLabel}}</div>
</div>
<div class="col-xs-1 col-md-1 col_padd"><i class="fa fa-angle-right right_arrow "></i></div>
</div>
Js :-
var myAngApp = angular.module('myApp', []);
myAngApp.controller('Ctrl', function ($scope) {
$scope.result = function () {
$scope.correctAns = [{
"QuestionID": "1",
"QuestionLabel": "Why are mirrors often slightly curved (convex) ?",
"Image": "zibra-crossing.jpg",
"Correct": "two",
"Explaination": "Question one explaination is goes here"
}, {
"QuestionID": "2",
"QuestionLabel": "You are about to drive home. You feel very tired and have a severe headache. You should ?",
"Image": "",
"Correct": "one",
"Explaination": "Question two explaination is goes here"
}, {
"QuestionID": "3",
"QuestionLabel": "While you are driving on gra dient roads,you should ?",
"Image": "sign traffic.jpg",
"Correct": "one",
"Explaination": "Question three explaination is goes here"
}, {
"QuestionID": "4",
"QuestionLabel": "When child lock is applied in car ?",
"Image": "",
"Correct": "two",
"Explaination": "Question four explaination is goes here"
}]
$location.path("/reviewans");
};
});
Output :-
Here, the problem is with directive priority, ng-repeat having higher priority over ng-init, ng-init having priority=450, where as ng-repeat having priority=1000 (Refer angular source code). So technically ng-repeat gets executed before ng-init so correctAns is empty.
You can either move ng-init one level up into HTML or to ng-controller tag.
OR/ELSE
If you are trying to run something while your controller loads, it's actually much simpler than you thought:
var myAngApp = angular.module('myApp', []);
myAngApp.controller('Ctrl', function ($scope) {
$scope.result = function () {
$scope.correctAns = [{
"QuestionID": "1",
"QuestionLabel": "Why are mirrors often slightly curved (convex) ?",
"Image": "zibra-crossing.jpg",
"Correct": "two",
"Explaination": "Question one explaination is goes here"
}, {
"QuestionID": "2",
"QuestionLabel": "You are about to drive home. You feel very tired and have a severe headache. You should ?",
"Image": "",
"Correct": "one",
"Explaination": "Question two explaination is goes here"
}, {
"QuestionID": "3",
"QuestionLabel": "While you are driving on gra dient roads,you should ?",
"Image": "sign traffic.jpg",
"Correct": "one",
"Explaination": "Question three explaination is goes here"
}, {
"QuestionID": "4",
"QuestionLabel": "When child lock is applied in car ?",
"Image": "",
"Correct": "two",
"Explaination": "Question four explaination is goes here"
}]
$location.path("/reviewans");
};
$scope.result();
});
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