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>
Related
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>
`
})
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 have two array which is given below
$scope.base64Array=[null, null, "/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQ…cmnAgj0PvTTgZJ5osK4w8dahc1MTnOMcnionwR2JNKwXP/9k=", null, null, null];
$scope.products=["Wheat", "LCD Monitor", "Ethernet Cable", "Optical Mouse", "Rice", "Mac Mini RAM 4 GB"];
Here I have an null value in base64array if it is null then no need to display image and if i have base64 string i need to display in that image row
and my ionic view looks like
<ul class="list">
<li class="item" ng-repeat="i in products" ui-sref="leadProduct" >
{{i}}
<br>
<img ng-show="imgURI === undefined" ng-src="http://placehold.it/100x100">
</li>
</ul>
You can add a track by $index to the repeat so you can tell which index you are at then index into base64Array.
<ul class="list">
<li class="item" ng-repeat="i in products track by $index" ui-sref="leadProduct" >
{{i}}
<br>
<img ng-show="base64Array[$index] != undefined" ng-src="{{'data:image/png;base64,'+base64Array[$index]}}">
<img ng-show="base64Array[$index] == undefined" src="http://placehold.it/100x100">
</li>
</ul>
Try process this two arrays before assignment, loop the base64Array, remove the null item and the same index item in products.
var tmp_base64Array = ["/9j/4AAQSkZJRgABAQAAAQABAAD..."];
var tmp_products = ["Ethernet Cable"];
After process the two arrays would be like this, then assignment to $scope.
edit:
$scope.products = [
{ "name": "Wheat", "imgUrl": null },
{ "name": "LCD Monitor", "imgUrl": "/9j/4AAQSkZJRgABA..." }
];
<ul class="list">
<li class="item" ng-repeat="product in products" ui-sref="leadProduct" >
{{product.name}}
<img ng-src="{{product.imgUrl || 'http://placehold.it/100x100'}}">
</li>
</ul>
I need help to use ng-model directive with ui-gmap-marker. My example app.js is:
// DevicesController
$scope.devices = {
id: 1,
center: { latitude: X, longitude Y },
options: {
show: true,
name: 'device 1',
radius: 100
}
(...)
}
My index.html is:
<ul ng-controller="DevicesController">
<li ng-repeat="d in devices">
<input type="checkbox" ng-model="d.options.show">
<span>{{ d.options.name }}</span>
</li>
</ul>
(...)
<div id="map_canvas" ng-controller="DevicesController">
<ui-gmap-marker
ng-repeat="d in devicesMarkers track by d.id"
idkey="d.id"
coords="d.center"
ng-model="d.options.show">
</ui-gmap-marker>
(...)
How can I use ng-model? Doesn't work because I'm using the same controller e two different places? I want that the user be able to click in input checkbox and the marker appear/disappear.
I'd suggest simply wrap both the div in same controller rather than providing a separate controller to them.
Markup
<div ng-controller="DevicesController">
<ul>
<li ng-repeat="d in devices">
<input type="checkbox" ng-model="d.options.show">
<span>{{ d.options.name }}</span>
</li>
</ul>
(...)
<div id="map_canvas">
<ui-gmap-marker
ng-repeat="d in devicesMarkers track by d.id"
idkey="d.id"
coords="d.center"
ng-model="d.options.show">
</ui-gmap-marker>
</div>
(...)
</div>
Else maintain the data in share able service that will provide the data to both controller and will make sure, data should be updated in both places.