I'm having a strange problem creating a list with Vuejs. I have an array like so:
const sr = new Vue({
el: '#singlerecipe-app',
data: {
checkeditems: [],
},
});
And this is instantiated in my HTML like so:
<div class="container" id="singlerecipe-app">
<singlerecipe :checkeditems="checkeditems"></singlerecipe>
</div>
And declared as a Prop in my component:
Vue.component('singlerecipe', {
props: ['checkeditems'],
template: `
<ul>
<li v-for="item of checkeditems">
{{ item.checkeditems }}
</li>
</ul>
`
})
The checked items code is:
<li v-if="result.strIngredient1">
<input type="checkbox" :value="result.strIngredient1" :id="result.strIngredient1" v-model="checkeditems"> {{result.strIngredient1}} - {{result.strMeasure1}}
</li>
<li v-if="result.strIngredient2">
<input type="checkbox" :value="result.strIngredient2" :id="result.strIngredient2" v-model="checkeditems"> {{result.strIngredient2}} - {{result.strMeasure2}}
</li>
If I click on one of the checkbox it definitely adds the correct value to the array checkeditems[] but oddly, it creates the new list items but doesn't add the value so I end up with this:
<ul>
<li></li>
<li></li>
</ul>
With no value in the list item. Does anyone have any idea what I'm doing wrong?
I think you've just accidentally added a 'checkeditems' in.
It should be:
Vue.component('singlerecipe', {
props: ['checkeditems'],
template: `
<ul>
<li v-for="item of checkeditems">
{{ item }}
</li>
</ul>
`
})
Related
I am trying to render several inputs (name, location, # of plants and 2 dates).
The 2 dates dont want to get displayed for some reasons they stay in an array format... I tried trooble shooting in several ways but nothing does :(
Any idea?
Here is the App part
let InitialOwners = [
{ nameOwner: 'Julie S', locationOwner: "Eixample", plantsOwner: "2" , startDateOwner: [{}] , endDateOwner : [] }
];
function App() {
const [owners, setOwners] = useState(InitialOwners);
// to get the data from PO form
function handleOwnerData(ownerData) {
let newOwners = [...owners, ownerData];
setOwners(newOwners)
console.log(`Owner Data: ${ownerData.locationOwner} ${ownerData.nameOwner} ${ownerData.plantsOwner} ${ownerData.startDateOwner} ${ownerData.endDateOwner}`)
}
Here is the list part where the data should be displayed
import React from "react";
function DashboardUsers(props){
return (
<div className ="Dashboard">
<h2> Welcome to the Dashboard</h2>
<h4> Here are the current owners </h4>
<ul>
{
props.owners.map((owners,i) => (
<div key={i}>
<li> Name: {owners.nameOwner}</li>
<li> Location: {owners.locationOwner} </li>
<li> # of plants: {owners.plantsOwner} </li>
<li> Start Date: [owners.startDateOwner] </li>
<li> End Date:[owners.endDateOwner] </li>
</div>
))
}
</ul>
</div>
)
}
export default DashboardUsers;
And here is how it looks like on the browser :D
browser image
When you are mapping over an array with objects each entry in the map, in your case 'owners', represents the current object. In that case owners.startDateOwner is an array of objects inside an array of objects. If you want to iterate over it you need to nest another map:
{
props.owners.map((owners,i) => (
<div key={i}>
<li> Name: {owners.nameOwner}</li>
<li> Location: {owners.locationOwner} </li>
<li> # of plants: {owners.plantsOwner} </li>
<li> Start Date: {owners.startDateOwner.map((ownerStartDate) => <span>{ownerStartDate}</span>)} </li>
<li> End Date:[owners.endDateOwner] </li>
</div>
))
}
this will iterate over the dates and print them in a <span>
I am trying to call a function using ng-click which is dynamically generated by ng-repeat the problem is that i am not able to get the parameter value passed in ng-click function. My html code is
<div class="col-md-4 col-xs-12 col-lg-4" ng-repeat="(key, value) in uploadedFiles">
<b>value.filename is {{value.filename}}</b>
<img ng-if="value.filetype=='jpg'" ng-src="http://localhost:3000/uploads/{{value.filename}}" class="img img-responsive thumbnail uploadedfile-thumb"/>
<img ng-if="value.filetype=='PDF'" ng-src="images/pdf-thumb.jpg" class="img img-responsive thumbnail uploadedfile-thumb"/>
<a ng-href="http://localhost:3000/uploads/{{value.filename}}" target="_blank" class="uploaded-file-links">View</a>
<a ng-href="#" ng-click="deleteFile(value.filename);" class="uploaded-file-links">Delete</a>
</div>
i am not getting the filename which is passed in deleteFile(), bit it is working in <b> tag in 2nd line so finally this is a problem with my angular expression so how should i write it?
I will try to make some guessing here.
I suppose that your uploadedFiles is an array of objecs, and not an object itself. In that case, you should use ng-repeat="file in uploadedFiles" which is meant to iterate over array elements. This will iterate over your array and assignf the corresponding object for that iteration to file variable.
The ng-repeat="(key, value) in uploadedFiles" is meant for iterating over object properties instead of iterating over array elements. For example, if uploadedFiles is:
var uploadedFiles = {
prop1: 'value1',
prop2: 'value2',
prop3: 'value3'
};
and you iterate over it like this:
<ul>
<li ng-repeat="(key, value) in uploadedFiles">
{{value}}
</li>
</ul>
you would get the following output:
value1
value2
value3
But if uploadedFiles is an array like this one:
var uploadedFiles = [
{
prop1: 'value11',
prop2: 'value12',
},
{
prop1: 'value21',
prop2: 'value22',
},
{
prop1: 'value31',
prop2: 'value32',
}
];
And you iterate over it like this:
<ul>
<li ng-repeat="file in uploadedFiles">
{{file.prop1}}
</li>
</ul>
you would get:
value11
value21
value31
So in your case, I would try the following:
<div class="col-md-4 col-xs-12 col-lg-4" ng-repeat="file in uploadedFiles">
<b>file.filename is {{file.filename}}</b>
<img ng-if="file.filetype=='jpg'" ng-src="http://localhost:3000/uploads/{{file.filename}}" class="img img-responsive thumbnail uploadedfile-thumb"/>
<img ng-if="file.filetype=='PDF'" ng-src="images/pdf-thumb.jpg" class="img img-responsive thumbnail uploadedfile-thumb"/>
<a ng-href="http://localhost:3000/uploads/{{file.filename}}" target="_blank" class="uploaded-file-links">View</a>
<a ng-href="#" ng-click="deleteFile(file.filename);" class="uploaded-file-links">Delete</a>
</div>
How to show comments in items?
This is where items save
$scope.items = [
{ 'item': 'one',
'comments':[{'comment':'comment'}]
},
{ 'item': 'two',},
{'item': 'three'}
];
<ul>
<li ng-repeat="ite in items">
{{ite.item}} {{ite.comments.length}}
<button ng click="remove($index)">Remove</button> <div ng-repeat="c in ite.comments">{{c.comment}}</div>
</li>
</ul>
http://plnkr.co/edit/19w1Q3XhoWQcpxm5SuxX?p=preview
You Just missed to add your comment Div in between the list tag. please update the code like above code. I have checked on Plunker.
<li ng-repeat="ite in items">
{{ite.item}} {{ite.comments.length}}
<button ng-click="remove($index)">Remove</button> <div ng-repeat="c in ite.comments">{{c.comment}}</div></li>
I want to push an item in my array object, and this is my code:
<li gridster-item="item" ng-repeat="item in widgets" style="border: #ddd 1px solid;">
<a ng-click="list.push(item)" style="padding:2px;position: absolute;z-index: 1000;right:2%;top: 2%;" class="add-widget-to-sidebar pull-right">
<span class="glyphicon glyphicon-plus-sign" aria-hidden="true" style="margin:2px 10px;"></span>
</a></li>
and $scope.widgets already has hashkeys on every object, and what I want to do is every time I push a new item in my list, I want a new $$hashkey for it. I already tried doing this and it didn't work:
$scope.$watchCollection('list', function() {
$scope.temp = []
rand=0;
angular.forEach($scope.list,function(value,key){
value.$$hashKey = rand++;
console.log(rand);
$scope.temp.push(value);
});
$scope.list = $scope.temp;
console.log('temp');
console.log($scope.temp);
console.log('list');
console.log($scope.list);
$scope.resize();
});
I found an alternative solution:
<ul>
<li ng-repeat="item in widgets track by $id($index)">
.....
</li>
this will remove $$hashkey on your ng-repeat
everyone, I've a scenario like this...
$scope.flags = {
'porIdade': {
'text': 'Por idade',
'flags': {
'meses1a3': '1 a 3 meses',
'meses4a7': '4 a 7 meses',
'meses8a12': '8 a 12 meses'
}
},
'sexo': {
'text': 'Sexo',
'flags': {
'menino': 'Menino',
'menina': 'Menina'
}
},
'estacao': {
'text': 'Coleção',
'flags': {
'menino': 'Inverno',
'menina': 'Verão'
}
}
}
Basically I need to put, for example: porIdade.text into the panel-heading into a DIV
and populate the children inside the UL. I don't know how to use ng-repeat for this. This is the html.
<div class="panel panel-default" id="leftColumn">
<div class="panel-heading">PARENT</div>
<ul class="list-group">
<li class="list-group-item">Child1</li>
<li class="list-group-item">Child1</li>
<li class="list-group-item">Child1</li>
<li class="list-group-item">Child1</li>
</ul>
</div>
so, if I set something like this:
PARENT
this will create 3 rows with panel-heading. So, to solve this I need something like...
<ng-repeat start here (key,val) in flags>
<div class="panel panel-default" id="leftColumn">
<div class="panel-heading">PARENT</div>
<ul class="list-group">
<li class="list-group-item" ng-repeat children>{{child.text}}</li>
</ul>
</div>
</ng-repeat finish here>
ANy suggestions ? I can't use a DIV before the panel :( so, this suggestions is not valid. It's causes a weird behaviour with the bootstrap.
You need to use a nested ng-repeat like this: (I've removed classes to keep the concept more readable)
<div ng-repeat="data in flags">
<div ng-bind="data.text"></div>
<ul>
<li ng-repeat="item in data.flags" ng-bind="item"></li>
</ul>
</div>