Develop Reference

Why vuejs array shows empty even if it not?

I have a list of checkbox which is dynamic.
Whenever I click on the checkbox, it is binded to the data array. The index is provided as the top company name. But the array shows empty when I log the array. But if I iterate through it and log again, it shows the values.
In JS we cannot set the array index directly. Is that the problem?
Code:
new Vue({
el: '#app',
data: {
topCompanies: [{
"doc_count": 221,
"key": "a"
},
{
"doc_count": 175,
"key": "b"
},
{
"doc_count": 149,
"key": "c"
},
{
"doc_count": 126,
"key": "d"
},
{
"doc_count": 116,
"key": "e"
},
{
"doc_count": 115,
"key": "f"
},
{
"doc_count": 94,
"key": "g"
},
{
"doc_count": 89,
"key": "h"
},
{
"doc_count": 75,
"key": "h"
},
{
"doc_count": 72,
"key": "i"
}
],
collapse1: false,
checked_company: []
},
methods: {
getResultsByCompany(result) {
console.log(this.checked_company)
temp = []
for (i in this.checked_company) {
console.log(i)
}
}
}
});
<div id="app">
<div id="sidebar-wrapper">
<button class="collapsible" #click="collapse1=!collapse1">Top Companies</button>
<div v-if="collapse1" class="content" v-bind:style="{'display': 'block'}">
<div class="list-group" v-for = "(result,index) in topCompanies" :key="result.id">
<label class="container check-an" :id="index" #change = "getResultsByCompany(result.key)">{{ result.key}}({{result.doc_count }})
<input type="checkbox" v-model="checked_company[result.key]">
<span class="checkmark"></span>
</label>
</div>
js fiddle: https://jsfiddle.net/Lbkx5zdt/

You declare checked_company as an array, but you treat it as an object checked_company[result.key]
If you want to save all checked company key in an array, then your checkbox code should be
<input type="checkbox" :value="result.key" v-model="checked_company">
Demo: https://jsfiddle.net/ittus/9jya1gas/

I see you seem missing several div tags
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<div id="sidebar-wrapper">
<button class="collapsible" #click="collapse1=!collapse1">Top Companies</button>
<div v-if="collapse1" class="content" v-bind:style="{'display': 'block'}">
<div class="list-group" v-for = "(result,index) in topCompanies" :key="result.id">
<label class="container check-an" :id="index" #change = "getResultsByCompany(result.key)">{{ result.key}}({{result.doc_count }})
<input type="checkbox" v-model="checked_company[result.key]">
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</div>
It make vuejs don't know el scope

I'm not really sure this will be the issue but have you checked that 'this' refers to the correct object? Potentially you could assign a variable to new Vue and reference the object globally. Hope it helps.

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

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>

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>

angular js to keep track of like and dislike click

I am trying to develope app in angularjs where i am reading json to read comments with like and dislike button . i am stuck at point where i am not sure how to track if user has already clicked on Like for particular comment ??
data.json::
[ {
"name": "Anam",
"age": 20,
"id": 100,
"commentline": "Yes Good !!!",
"like":5,
"dislike":1
},
{
"name": "Moroni",
"age": 50,
"id": 101,
"commentline": "Yes Good !!!",
"like":5,
"dislike":1
},
{
"name": "Tiancum",
"age": 43,
"id": 102,
"commentline": "Yes Good !!!",
"like":5,
"dislike":1
},
{
"name": "Jacob",
"age": 27,
"id": 103,
"commentline": "Yes Good !!!",
"like":5,
"dislike":1
},
{
"name": "Nephi",
"age": 29,
"id": 104,
"commentline": "Yes Good !!!",
"like":5,
"dislike":1
},
{
"name": "Anam",
"age": 20,
"id": 100,
"commentline": "Yes Good !!!",
"like":5,
"dislike":1
}
]
HTML ::
<!DOCTYPE html>
<html ng-app="FundooDirectiveTutorial">
<head>
<title>Rating Directive Demo</title>
<link rel="stylesheet" href="rating.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<style>
.sideheading
{
display: inline-block
}
</style>
</head>
<body ng-controller="FundooCtrl">
<h2>Listing All Comments </h2>
<br/><!--
<div class="commentbox" ng-repeat="comment in comments" >
<h4 class="sideheading">comment By:</h4>{{comment.name}}<br/>
<h4 class="sideheading">Comment ::</h4>{{comment.commentline}} <br/>
<h4 class="sideheading">Likes ::</h4> {{comment.like}} <br/>
<h4 class="sideheading">Dislike::</h4> {{comment.dislike}} <br/>
</div>
-->
<div class="panel panel-default" ng-repeat="comment in comments">
<div class="panel-heading">
<h3 class="panel-title">{{comment.name}}</h3>
</div>
<div class="panel-body">
Comment ::{{comment.commentline}} <br/>
Likes :: {{comment.like}}
<button type="button" class="btn btn-default btn-xs" ng-click="incrlikes(comment)">
<span class="glyphicon glyphicon-star"></span> Like
</button>
<button type="button" class="btn btn-default btn-xs" ng-click="decrlikes(comment)">
<span class="glyphicon glyphicon-star"></span> DisLike
</button><br/>
Dislike:: {{comment.dislike}}
<br/>
likeflag::
<br/>
</div>
</div>
<!-- <div fundoo-rating rating-value="rating" max="10" on-rating-selected="saveRatingToServer(rating)"></div>
<br/>
Readonly rating <br/>
<div fundoo-rating rating-value="rating" max="10" readonly="true"></div>
-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script type="text/javascript" src="comment.js"></script>
</body>
</html>
JS ::
var app=angular.module('FundooDirectiveTutorial', []);
app.controller('FundooCtrl', function ($scope, $http) {
$http.get('comment.json').success(function(data) {
$scope.comments = data;
$scope.incrlikes=function(a)
{
var selectedIndex=$scope.comments.indexOf( a );
console.log('Likes increment'+a.name);
console.log($scope.comments.indexOf( a ) +'with index of name is '+$scope.comments[selectedIndex].name );
$scope.comments[selectedIndex].like=$scope.comments[selectedIndex].like+1;
$scope.likeflag=1;
if($scope.likeflag==1)
{
}else
{
console.log('Already like');
}
}
});
});
Fiddle::
http://jsfiddle.net/simmi_simmi987/DeKP4/

I solved my this problem using ng-show and ng-hide,
when likeClicked is false then i show like button , and when user click it on it i change variable to false . so automaticaly , dislike button is shown
var app=angular.module('FundooDirectiveTutorial', []);
app.controller('FundooCtrl', function ($scope, $http) {
$http.get('comment.json').success(function(data) {
$scope.comments = data;
$scope.likeClicked=[];
$scope.incrlikes=function(a)
{
var selectedIndex=$scope.comments.indexOf( a );
if(! $scope.likeClicked[selectedIndex])
{
console.log('Likes increment'+a.name);
console.log($scope.comments.indexOf( a ) +'with index of name is '+$scope.comments[selectedIndex].name );
$scope.comments[selectedIndex].like=$scope.comments[selectedIndex].like+1;
$scope.likeClicked[selectedIndex]=true;
}
else
{
console.log('Already like');
}
}
$scope.decrlikes=function(a)
{
var selectedIndex=$scope.comments.indexOf( a );
if($scope.likeClicked[selectedIndex])
{
console.log('Likes increment'+a.name);
console.log($scope.comments.indexOf( a ) +'with index of name is '+$scope.comments[selectedIndex].name );
$scope.comments[selectedIndex].like=$scope.comments[selectedIndex].like-1;
$scope.likeClicked[selectedIndex]=false;
}
else
{
console.log('Already Dislike');
}
}
});
});