Iam new to angularJs.
I'm trying to display user Profile on Popup based on the display that i already make with ng-repeat. The Gallery im trying to display with ng-repeat is not showing, i've already tried using other method such as orderby or |filter. it is only display the last image from my variables.
Is there any way to display the modal popup data as the thumbnail displayed?
thank you
Here is my code
(function () {
var app = angular.module('agent', []);
app.controller('AgentController', function ($scope) {
this.products = talents;
});
var talents = [
{
id: '001',
name: 'Jasmina',
images: [
'../assets/images/Jasmina3.jpg',
'../assets/images/Jasmina4.jpg',
'../assets/images/Jasmina7.jpg',
],
skills: ['Usherette', 'escort'],
indexing: ['usher', 'escort']
},
{
id: '002',
name: 'Bruna',
images: [
'../assets/images/BrunaD17.jpg',
'../assets/images/BrunaD18.jpg',
'../assets/images/BrunaD10.jpg',
],
skills: ['Usherette', 'escort'],
indexing: ['usher', 'escort']
},
{
id: '003',
name: 'Anda',
images: [
'../assets/images/Anda.jpg',
'../assets/images/Anda8.jpg',
'../assets/images/Anda11.jpg',
],
skills: ['Usherette', 'escort', 'Modeling'],
indexing: ['usher', 'escort', 'model']
},
{
id: '004',
name: 'Anne',
images: [
'../assets/images/AnneD8.jpg',
'../assets/images/AnneD17.jpg',
'../assets/images/AnneD21.jpg',
],
skills: ['Modeling'],
indexing: ['model']
}
];
})();
Here is My Html for Displayed Thumbnail that already load successful data with ng-repeat.
<div ng-controller="AgentController as agent" class="talent-container">
<div ng-repeat="product in agent.products" class="card boxed" ng-class=" {{product.indexing}}">
<div class="actionlist">
<div id="id"><span>{{product.id}}</span></div>
<div class="addBtn">
<img src="assets/icons/plus.svg">
</div>
<div class="loveBtn">
<img src="assets/icons/heart-in-a-circle.svg">
</div>
</div>
<div class="media">
<!--<div class="overlay">
<button class="gallery moreBtn">STORY</button>
</div>-->
<div><img id="slideShow" ng-src="{{product.images[0]}}"></div>
<div class="hide"><img id="slideShow" ng-src="{{product.images[1]}}"></div>
<div class="hide"><img id="slideShow" ng-src="{{product.images[2]}}"></div>
</div>
<div class="info">
<div id="name">{{product.name}}</div>
<div class="button medium">
MORE
</div>
</div>
<div class="skills-thumb">
{{product.skills[0]}}
{{product.skills[1]}}
{{product.skills[2]}}
</div>
Now, Im trying to open modal with more detailed information and displaying image gallery in there using ng-repeat. This is the HTML
<div class="modalData" id="talentData">
<div class="modalOverlay"></div>
<div class="contentData">
<div class="dataContainer">
<div class="gr-2 gallery">
<div><img ng-src="{{product.images}}"></div>
</div>
<div class="gr-2 biodata">
</div>
</div>
X
</div>
</div>
Your modal content should be something as simple as:
<div class="modalData" id="talentData">
<div class="modalOverlay"></div>
<div class="contentData">
<div class="dataContainer">
<div class="gr-2 gallery">
<div ng-repeat="image in product.images">
<img ng-src="{{image}}">
</div>
</div>
<div class="gr-2 biodata">
</div>
</div>
X
</div>
</div>
*You haven't shown any of your CSS, so this might not be 100% the result you wanted.
Related
I have tried all the solutions on the internet but have not been able to print the pictures on the screen in any way. Am I making a very simple mistake? File names and folders are correct.
While giving the path, I want to get the picture registered with the name subclubName from the related folder by giving sub-club name from the data. E.g Art.jpg. I would be very happy if you could help.
<template>
<div>
<div class="container">
<a class="logo" href="#">Social Interest e-Club</a>
<div class="start">Start</div>
<div class="progress-bar-front bar"></div>
<div class="progress-bar-back"></div>
<div class="finish">Finish</div>
</div>
<form class="questionnaire-result" action="#">
<h1 class="h1">Here are your result!</h1>
<div class="grid-container">
<h2 class="sub-club"> Sub-Club</h2>
<h2 class="score"> Score</h2>
<h2 class="join-que"> Want to Join?</h2>
<div class="sub-club-section " v-for="(subclub,index) in subclubs" :key="index">
<img class="image" :src="'#/assets/sub-clubs-images/'+ 'subclub.subclubName'+'.jpg'" width="75">
<h3 v-if="subclub.score>50" class="score-result" style="color:#0cf12a ">{{subclub.score}}%</h3>
<h3 v-else class="score-result" style="color:red ">{{subclub.score}}%</h3>
<div v-if="subclub.score>50">
<input class="join-btn option-input checkbox" type="checkbox" v-model="subclubName" :value="index" >
</div>
</div>
<button #click=" goToHomePage()" class="button "><span> JOIN </span></button>
</div>
</form>
</div>
</template>
<script>
export default {
name:"result",
data(){
return{
subclubs:[
{
id:1,
subclubName:"Yoga",
score:70,
},
{
id:3,
subclubName:"Novel",
score:60,
},
{
id:4,
subclubName:"Piano",
score:45,
},
]
}
},
methods:{
goToHomePage(){
this.$router.push("/");
}
}
}
</script>
Just using "#/assets/" wont work to get root (src) directory url. Wrap the string with require() and remove quotations from subclub.subclubName variable
Like
<img class="image" :src="require('#/assets/sub-clubs-images/' + subclub.subclubName + '.jpg')" width="75">
Also you can use ES6 template literals to concatenate strings with variables as below
<img class="image" :src="require(`#/assets/sub-clubs-images/${subclub.subclubName}.jpg`)" width="75">
you must use require. like this:
<img class="image" :src="require('#/assets/sub-clubs-images/'+ subclub.subclubName+'.jpg')" width="75">
That might sound a little confusing, but basically I have some html that looks like this (which is dynamically created)
<body>
<div class="component" id="465a496s5498">
<div class="a-container">
<div class="random-div">
<div class="wantThis">
<div class="wantThisHTML">Hello!<p>I'm another element!</p></div>
</div>
</div>
<div class="random-div">
<div class="random"></div>
</div>
</div>
</div>
<div class="component" id="683fg5865448">
<div class="another-container">
<div class="random-div">
<div class="wantThis">
<div class="wantThisHTML">Wow!</div>
</div>
</div>
<div class="random-div6">
<div class="random2"></div>
</div>
</div>
</div>
<div class="component" id="247487294js5">
<div class="more-containers">
<div class="random-div">
<div class="wantThis">
<div class="wantThisHTML">Haha!</div>
</div>
</div>
<div class="random-div6">
<div class="random5"></div>
</div>
</div>
</div>
</body>
And I want to create an array of objects which includes the unique id of the component and the raw HTML within the element with class name "wantThis" (it will always be called "wantThis"), so the array would look like
[{
id: "465a496s5498",
html: "<div class='wantThisHTML'>Hello!<p>I'm another element!</p></div>"
},{
id: "683fg5865448",
html: "<div class='wantThisHTML'>Wow!</div>"
},{
id: "247487294js5",
html: "<div class='wantThisHTML'>Haha!</div>"
}]
As for what i've tried, I split up the elements into an array using var elements = $(body).children, and I know to get the HTML within an element using $(.wantThis).html(), but how can I get the id and the HTML from each of the elements I obtain from the children?
Also, within the wantThis element there may me multiple elements, will $(.wantThis).html() get the raw HTML of ALL the children?
There you go.
var data = $('> .component', document.body).map(function(component) {
return {
id: this.id,
html: $(this).find('.wantThisHTML').html()
}
})
.toArray();
console.log(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="component" id="465a496s5498">
<div class="a-container">
<div class="random-div">
<div class="wantThis">
<div class="wantThisHTML">Hello!
<p>I'm another element!</p>
</div>
</div>
</div>
<div class="random-div">
<div class="random"></div>
</div>
</div>
</div>
<div class="component" id="683fg5865448">
<div class="another-container">
<div class="random-div">
<div class="wantThis">
<div class="wantThisHTML">Wow!</div>
</div>
</div>
<div class="random-div6">
<div class="random2"></div>
</div>
</div>
</div>
<div class="component" id="247487294js5">
<div class="more-containers">
<div class="random-div">
<div class="wantThis">
<div class="wantThisHTML">Haha!</div>
</div>
</div>
<div class="random-div6">
<div class="random5"></div>
</div>
</div>
</div>
ONE approach to this is....
Select the Nodes (elements) using "querySelectorAll"
let nodeListOfComponentElements = document.querySelectorAll('.component')
This will get you a NodeList. NodeList
You can turn that into an array of Nodes by:
let nodeArray = [].slice.call(nodeListOfComponentElements) SO-Post
Then, using that array of nodes. You can 'map' it to the structure you want.
let result = nodeArray.map(function(item, index) {
let targetElement = item.querySelector('.wantThisHTML')
return {
id: item.id,
html: targetElement.innerHTML
}
})
note: each "item" is an element/node and the method querySelector can be used to select children of that element. I'm targeting the class you mentioned. Then it's just a matter of returning an object for each iteration that the map function executes. You pick the keys and values that the map function returns. Here I'm setting the id key to the id of the element, and the html key to the "innerHTML" of the target child element within each main element.
The resulting structure is as follows:
(3) [{…}, {…}, {…}]
0: {id: "465a496s5498", html: "Hello!<p>I'm another element!</p>"}
1: {id: "683fg5865448", html: "Wow!"}
2: {id: "247487294js5", html: "Haha!"}
length: 3
CodePen: https://codepen.io/nstanard/pen/exOJLw
Don't forget to upvote and approve my answer it helps!
Thanks
To make sure the .component has wanted '.wantThis' child.
var data = $('.wantThis').map(function() {
return {
id: $(this).parents('.component').attr('id'),
html: $(this).html()
}
});
console.log(data);
var data = $('.wantThis').map(function() {
return {
id: $(this).parents('.component').attr('id'),
html: $(this).html()
}
});
console.log(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="component" id="465a496s5498">
<div class="a-container">
<div class="random-div">
<div class="wantThis">
<div class="wantThisHTML">Hello!<p>I'm another element!</p></div>
</div>
</div>
<div class="random-div">
<div class="random"></div>
</div>
</div>
</div>
<div class="component" id="683fg5865448">
<div class="another-container">
<div class="random-div">
<div class="wantThis">
<div class="wantThisHTML">Wow!</div>
</div>
</div>
<div class="random-div6">
<div class="random2"></div>
</div>
</div>
</div>
<div class="component" id="247487294js5">
<div class="more-containers">
<div class="random-div">
<div class="wantThis">
<div class="wantThisHTML">Haha!</div>
</div>
</div>
<div class="random-div6">
<div class="random5"></div>
</div>
</div>
</div>
<div id="elem">
<div id="elem-content">Element</div>
</div>
<script>
alert(elem); // DOM-element with id="elem"
alert(window.elem); // accessing global variable like this also works
// for elem-content things are a bit more complex
// that has a dash inside, so it can't be a variable name
alert(window['elem-content']); // ...but accessible using square brackets [...]
</script>
reference: https://javascript.info/searching-elements-dom
How do I create this div while I iterate over an json array?
I have different data which I would have to show in different thumbnails in a row and I'd like to have a template like this:
for(var i = 0; i < jsonArray.length; i++)
{
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="somesource" alt="sometext"/>
<div class="caption">
<h3>jsonArray[i].title</h3>
<p>jsonArray[i].description</p>
</div>
</div>
</div>
</div>
}
If anyone knows how to do this and which framework provides this, please help me out. Thank you in advance!
You can use the ng-repeatfeature of AngularJS
Just take a look at the example code I provided.
In your case, your variabele jsonArray would have to be assigned or replaced by $scope.items
Here's a fiddle to show a working example or just run the snippet
var myApp = angular.module("example", []);
myApp.controller("exampleController", ['$scope', example]);
function example($scope)
{
$scope.items = [
{
title: "Title 1",
description: "This is a description for title 1"
},
{
title: "Title 2",
description: "This is a description for title 2"
},
{
title: "Title 3",
description :" This is a description for title 3"
}
];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="example">
<div ng-controller="exampleController">
<div class="row" ng-repeat="item in items">
<div class="col-sm-6 col-md-4">
<img src="#" alt="some image"/>
<div class="caption">
<h3>
{{item.title}}
</h3>
<p>
{{item.description}}
</p>
</div>
</div>
</div>
</div>
</div>
I have problem to show all elements of subcategory with Ng-Repeat. Actually i can show all events from selected category with this code, but i don't know how to show all activities from specific event.
i have this code....
HTML
<div class = "categorias_eventos">
<ul>
<li value = "0" class = "active">
<img src="images1" ng-click="categorySelected = {categoryName: '1'}">
</li>
<li value = "1" class = "active">
<img src="images2" ng-click="categorySelected = {categoryName: '2'}">
</li>
<li value = "2">
<img src="images3" ng-click="categorySelected = {categoryName: '3'}">
</li>
<li value = "3" >
<img src="images4" ng-click="categorySelected = {categoryName: '4'}">
</li>
<li value = "4">
<img src="images5" ng-click="categorySelected = {categoryName: '5'}">
</li>
</ul>
</div>
<div ng-controller="Test">
<div ng-repeat="evento in eventos | filter:categorySelected" ng-click = "eventSelected = {id: '{{evento.id}}'}">
<div class="infoEvento">
<div class="name_event">
{{evento.eventName}}
</div>
</div>
</div>
</div>
<!-- Activitys -->
<div ng-controller="Test">
<div ng-repeat="activity in evento.activitys | filter:eventSelected">
<div class="infoEvento">
<div class="name_event">
{{activitys.description}}
</div>
</div>
</div>
</div>
JAVASCRIPT
function Test($scope) {
$scope.eventos = [
{
"id":"1",
"dateStart":"01-12-2014",
"dateEnd":"12-12-2014",
"eventName":"partyDeluxe",
"categoryName":"Category 1",
"activitys":
[
{
"pic_id":"1500",
"description":"Picture of a computer",
"localion":"img.cloudimages.us/2012/06/02/computer.jpg",
"type":"jpg"
},
{
"pic_id":"100",
"description":"Picture of a computer",
"localion":"img.cloudimages.us/2012/06/02/computer.jpg",
"type":"jpg"
},
{
"pic_id":"15",
"description":"Picture of a computer",
"localion":"img.cloudimages.us/2012/06/02/computer.jpg",
"type":"jpg"
}
]
},
];;
}
The problem you have is that your inner ng-repeat is sitting outside your outer, which means the activity context is unknown. To fix this, you simply need to rethink your div layout to include one ng-repeat inside the other. For example:
<div ng-controller="Test">
<div ng-repeat="evento in eventos | filter:categorySelected">
<div ng-click = "eventSelected = {id: '{{evento.id}}'}">
<div class="infoEvento">
<div class="name_event">
{{evento.eventName}}
</div>
</div>
</div>
<!-- Activitys -->
<div ng-controller="Test">
<div ng-repeat="activity in evento.activitys | filter:eventSelected">
<div class="infoEvento">
<div class="name_event">
{{activitys.description}}
</div>
</div>
</div>
</div>
</div>
</div>
Hi I am working on requirement where my filter object is keep getting changed and because of that i have to change ng-repeat on div.
html code :
<div class="col-md-6" ng-repeat="model in models | filter:{ModelText : '!All models', ModelId: '!FilteredModelIds'}:true">
<div class="well">
<div class="media">
<div class="media-object small"><i class="pp-car"></i></div>
<div class="media-body">
<div class="text-box">
<h3>{{model.ModelText}}</h3><span class="hr-small"></span>
</div>
<div class="dashboard-control clearfix">
<div class="simple-metric text-left sub-metric">
<div class="metric-title">Satisfaction score</div>
<div class="metric-number text-red">{{model.SatisfactionAvg}}</div>
</div>
<div class="simple-metric text-left sub-metric">
<div class="metric-title">Total interviews</div>
<div class="metric-number">{{model.TotalInterviews}}</div>
</div>
</div>
<ul class="list-standard">
<li> View interviews</li>
</ul>
</div>
</div>
</div>
</div>
here is the angular js code:
function getModelId() {
dataFactory.getModelIdByFilter($scope.region, $scope.subregion).success($scope.handleSuccess).then(function (result) {
$scope.FilteredModelIds = result.data;
});
}
Model json :
[{"ModelId":0,"ModelText":"All models","Sequence":0,"TotalInterviews":0,"SatisfactionAvg":0.000000},{"ModelId":1,"ModelText":"A3","Sequence":20,"TotalInterviews":2062,"SatisfactionAvg":9.637245},{"ModelId":2,"ModelText":"A4","Sequence":30,"TotalInterviews":3106,"SatisfactionAvg":9.743721},{"ModelId":3,"ModelText":"A5","Sequence":40,"TotalInterviews":1863,"SatisfactionAvg":9.694041},{"ModelId":4,"ModelText":"A6","Sequence":50,"TotalInterviews":280,"SatisfactionAvg":9.642857},{"ModelId":5,"ModelText":"A8","Sequence":70,"TotalInterviews":46,"SatisfactionAvg":11.217391},{"ModelId":9,"ModelText":"Q5","Sequence":110,"TotalInterviews":3176,"SatisfactionAvg":9.503778},{"ModelId":10,"ModelText":"Q7","Sequence":120,"TotalInterviews":1355,"SatisfactionAvg":9.685608},{"ModelId":11,"ModelText":"R8","Sequence":130,"TotalInterviews":31,"SatisfactionAvg":10.064516},{"ModelId":12,"ModelText":"TT","Sequence":140,"TotalInterviews":408,"SatisfactionAvg":9.764705},{"ModelId":13,"ModelText":"A1","Sequence":10,"TotalInterviews":1087,"SatisfactionAvg":10.097516},{"ModelId":14,"ModelText":"A7","Sequence":60,"TotalInterviews":263,"SatisfactionAvg":10.190114},{"ModelId":15,"ModelText":"Q3","Sequence":105,"TotalInterviews":1045,"SatisfactionAvg":9.542583}]
on page load its showing proper data with filter. but on change of filtered object in my case FilteredModelIds, its not getting updated. any help is appreciated.
please let me know if i am worng here.
Thanks.