Angular JS image display error - javascript

I have uploaded image in upload table using grids and MongoDB and I have stored image name in store table.
When I get store details first i have taken image name and check from upload table and displaying the image.
Here I am looping that image name its working but it always showing last image. I have enclosed my html and controller.
$http.get('***').success(function(data,dealers,response) {
var storelen=data.length;
console.log(storelen);
for(var i=0;i<storelen;i++) {
var storeimages=JSON.stringify(data[i].Store_Images);
var storeimages=(storeimages.replace(/\"/g, ""));
console.log(storeimages);
$http.get('***').success(function(data, status,response) {
$scope.image=data;
console.log($scope.image);
});
}
$scope.dealers = data;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ion-view >
<ion-content style="margin-top:50px;" ng-controller="ListingCtrl" data-ng-init="find()">
<div class="list card" data-ng-repeat="dealer in dealers | filter:query | filter:myFilter">
<div class="item item-thumbnail-left item-icon-right" href="#">
<img src="{{image}}" id="myimage">
<h2>{{dealer.Store_Name}}</h2>
<p>{{dealer.S_Address.city}} , {{dealer.S_Address.area}}</p>
<div class="row" style="padding:0px;">
<div class="col-90"><p style="font-size:10px">review</p></div>
<div class="col-10" style="margin-left:30px;">
<i style="right:0px;font-size:18px;color:#ff6f00;"class="icon ion-ios-location subdued"></i>
</div>
</div>
<div class="row" style="padding:0px;">
<div class="col" style="padding: 0px;"><p style="font-size:14px;" listing-rating rating-value="rating" max="5"></div>
</div>
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" ng-href="tel:{{dealer.S_Phone.number}}">
<i class="icon ion-ios-telephone " ></i>
Contact Now
</a>
<a class="tab-item" style="color:green;">
<i class="icon ion-pricetags"></i>
Email
</a>
<a class="tab-item" style="color:#ff6f00;" >
<i class="icon ion-wand" ></i>
Check Now
</a>
</div>
</div>
</ion-content>
</ion-view >
In my table having 3 images, I am getting 3 images in console, but html I am always getting the last image.
I want to display image with in ng-repeat is there any other way doing it ?

Related

innerHTML property not working with owl carousel

I am fetching data from firestore database to create a product card so that I can display the product cards inside a carousel. Owl carousel to be specific. I am using the innerHTML property in javascript to add the product cards programmatically. The Owl carousel seems to not work when I do so but when I create the cards statically in html the carousel works. What could be the problem?
Code:
Html:
<div class="product-area most-popular section">
<div class="container">
<div class="row">
<div class="col-12">
<div class="section-title">
<h2>Hot Items</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="owl-carousel popular-slider" id="owlCarousel">
<!--product cards go here-->
</div>
</div>
</div>
</div>
</div>
Javascript:
var view2 = document.getElementById("owlCarousel");
db.collection("products").where("hot" , "==" , true)
.get().then((querySnapshot)=> {
querySnapshot.forEach((doc) => {
var image = doc.data().images[0];
var image2 = doc.data().images[1];
var title = doc.data().title;
var price = doc.data().pricing.toString();
var hot = doc.data().hot;
var discount = doc.data().discount;
var price = doc.data().pricing;
//product card creation
view2.innerHTML += `
<div class="single-product">
<div class="product-img">
<a href="product-details.html">
<img class="default-img" src="${image}" alt="#">
<img class="hover-img" src="${image2}" alt="#">
<span class="out-of-stock">Hot</span>
</a>
<div class="button-head">
<div class="product-action">
<a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i class=" ti-eye"></i><span>Quick Shop</span></a>
<a title="Wishlist" href="#"><i class=" ti-heart "></i><span>Add to Wishlist</span></a>
<a title="Compare" href="#"><i class="ti-bar-chart-alt"></i><span>Add to Compare</span></a>
</div>
<div class="product-action-2">
<a title="Add to cart" href="#">Add to cart</a>
</div>
</div>
</div>
<div class="product-content">
<h3>${title}</h3>
<div class="product-price">
<span>Ksh. ${price}</span>
</div>
</div>
</div>
`
});
});
I just had the same problem.
What you should do is initialize the OWL CAROUSEL after you add the template (inner html);
for example:
view.innerHtml = `<div> content </div`;
$('.owl-carousel').owlCarousel({
//here you can add the props or events
})
This worked for me! hope this could hel you :)

not able to get the selected tab value to the controller in angular.js

In html A i am calling html B which contain tab as shown is the image. now the "Save " and "Save All" button is in html B i have used css to move to the top but this is not the right way to do. I need "Save" and "Save All" button in html A but for this i need to know which tab is selected.
HTML B
<div id="confi">
<div class="row">
<section widget-grid id="widget-grid">
<div class="col col-md-12">
<div ng-if="currComp" jarvis-widget id="script-widget" data-widget-color="darken" data-widget-colorbutton="false" data-widget-editbutton="false"
data-widget-deletebutton="false">
<header>
<span class="widget-icon">
<i class="fa fa-gear"></i>
</span>
<h2>Script Configuration for {{comp}}</h2>
</header>
<div class="widget-body padding-10">
<ul id="scriptTabs" class="nav nav-tabs bordered">
<li ng-repeat="s in scripts track by $index">
<a id="s{{$index}}tab" href="#s{{$index}}" data-toggle="tab">
<i class="fa fa-fw fa-lg fa-file"></i> {{s}}
<!-- <span class="badge bg-color-blue txt-color-white">6</span> -->
</a>
</li>
</ul>
<!-- style="height:400px;margin-bottom: 30px;" -->
<div id="scriptTabsContent" class="tab-content padding-10">
<div class="tab-pane active" id="s{{$index}}" ng-repeat="s in scripts track by $index">
<div style="height:753px;width: 100%;">
<div id="{{ s }}" style="height:100%;width: 100%"></div>
<div style=" position: absolute;margin-top: -910px;right: 0px;">
<button class="btn btn-sm btn-primary pull-right" style="margin-top: 20px;" ng-click="save(s)">Save</button>
<button class="btn btn-sm btn-primary pull-right" style="margin-top: 20px;margin-right: 20px;" ng-click="saveAll('all')">Save All</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Currently i am using button in TabsContent so that i can get the value of "s" to the controller B and i cont use ng-click it is giving me error
<li ng-repeat="s in services track by $index" ng-click="functionInScope(s)">
<a id="s{{$index}}tab" href="#s{{$index}}" data-toggle="tab">
<i class="fa fa-fw fa-lg fa-file" ></i> {{s}}
</a>
</li>
please help me to get the value of "s" with out using the ng-click, so that i can send the value of "s" to the controller A for the save function.
Just a suggestion, Can't we create a variable named "selectedTab" and when you click the tab just generate a KeyUp event from that tab and in this event you can change the value this variable and while posting just get the value from that "selectedTab" variable.
For reference how to generate an click event
https://angular.io/guide/user-input

Generating Dynamic Template Reference Variables in Angular 6

We have a customised component from MDB (http://mdbootstrap.com), which requires the definition of template reference variables.
We are creating a listing that utilises a Card Component (https://mdbootstrap.com/angular/components/flipping-cards/). We define the basic template for one card, and then use *ngFor to loop through the data and create a card of the same template for each entry in our data.
The card component uses the following structure:
<mdb-card-rotating #cards>
<!-- Card's structure comes in here -->
<!--Triggering button-->
<a class="rotate-btn" data-card="card-1" (click)="cards.toggle()">
</mdb-card-rotating>
This component uses the template reference variable #cards to run the function toggle(), which rotates the card to display additional content.
However, this reference variable needs to be unique for each card; in our current set-up, the *ngFor loop ends up creating the same reference variable #card for all our generated cards, and then, when the triggering button is pressed from any of the cards, all cards end up rotating instead of just that specific card.
Here's the entire structure:
<div class="mb-5 pb-4 col-sm-12 col-xs-12 col-md-12 col-lg-4" *ngFor="let el of fetchedResults; let i = index">
<div class="col-md-12">
<mdb-card-rotating #cards>
<!--Front Side-->
<div class="face front tp-box_side tp-box_front">
<!-- Image-->
<div class="card-up">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2859%29.jpg" class="img-fluid">
</div>
<!--Avatar-->
<div class="avatar">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%289%29.jpg" class="rounded-circle img-responsive">
</div>
<!--Content-->
<div class="card-body">
<h4>{{ el.first_name }} {{ el.last_name }}</h4>
<p>{{ el.profession }}</p>
<!--Triggering button-->
<a class="rotate-btn" data-card="card-1" (click)="cards.toggle()"><i class="fa fa-repeat"></i> Click here to
rotate</a>
</div>
</div>
<!--/.Front Side-->
<!--Back Side-->
<div class="back tp-box_side tp-box_back">
<!--Content-->
<h4>About me</h4>
<hr>
<p>{{ el.about }}</p>
<hr>
<!--Social Icons-->
<ul class="list-inline">
<li class="list-inline-item">
<a class="icons-sm fb-ic">
<i class="fa fa-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a class="icons-sm tw-ic">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a class="icons-sm gplus-ic">
<i class="fa fa-google-plus"></i>
</a>
</li>
<li class="list-inline-item">
<a class="icons-sm li-ic">
<i class="fa fa-linkedin"></i>
</a>
</li>
</ul>
<!--Triggering button-->
<a class="rotate-btn" data-card="card-1" (click)="cards.toggle()">
<i class="fa fa-undo"></i> Click here to rotate back</a>
</div>
<!--/.Back Side-->
</mdb-card-rotating>
</div>
</div>
Any assistance/guidance or alternatives would be highly appreciated!

How to get the "id" of moving sortable UIKit 3 element using JavaScript?

I want to know or print which card that is being dragged let's say upon drop and show it in the UIKit notification. I checked the console.log but nothing happens. From the documentation, it is only possible to get even on moving but not to get the value of the element that is being dragged. My code is below.
https://codepen.io/rangka_kacang/pen/zWbOWo
HTML:
<div class="uk-section uk-section-primary uk-padding-remove-vertical">
<div class="uk-container">
<div uk-grid>
<div class="uk-width-1-6">
<nav uk-navbar>
<div class="uk-navbar-center">
<a class="uk-navbar-item uk-logo" href="">
<img class="uk-margin-small-right" height="48" width="48" src="https://image.flaticon.com/icons/svg/426/426121.svg">
Dashboard
</a>
</div>
</nav>
</div>
<div class="uk-width-expand">
<nav uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-item" href="">
<i class="fas fa-bars fa-2x"></i>
</a>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li>
<a>
<div class="uk-text-center">
<i class="fas fa-user-circle fa-2x"></i> <i class="fas fa-chevron-down"></i>
<div class="uk-navbar-subtitle">Account</div>
</div>
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-secondary uk-padding-medium">
<div class="uk-container">
<ul id="sortable" class="uk-grid-small uk-text-center" uk-sortable="handle: .uk-sortable-handle" uk-grid>
<li id="name">
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Name
</div>
</li>
<li id="email">
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Email
</div>
</li>
<li id="address">
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Address
</div>
</li>
</ul>
</div
</div
JS:
UIkit.util.on('#sortable', 'moved', function () {
//console.log();
UIkit.notification('Card has been moved.', 'success');
});
Thanks!
If you modify:
UIkit.util.on('#sortable', 'moved', function () {
//console.log();
UIkit.notification('Card has been moved.', 'success');
});
To be:
UIkit.util.on('#sortable', 'moved', function (item) {
console.log(item.detail[1].id)
UIkit.notification(`Card is ${item.detail[1].id}`, 'success');
});
It will display the elements id in the notification. You can go higher up in the "item" object in order to get more information on the dropped element.
Also, I'm using a template literal here to put the id in the notification. That's not supported via IE 11 so you might want to do something more traditional if you care about that.
For reference, you can see the data captured when moving elements via developer console here:
https://getuikit.com/assets/uikit/tests/sortable.html

Unable to load image and data in javascript

Problem is that I have NEWS-FEED module, in which I have taken data from server in which all title of news will be displayed on left div and after clicking on that news title , description regarding the news will be displayed on right div, in the code below, it simply shows data but don't know how to add image of that news.
CODE:
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-show = "dataFromRest" ng-repeat = "x in dataFromRest.posts" >
<div class="tittle">
<div style=" width:25%;">
<b ng-click="$index" style="text-decoration: none;">
<a href="#" ng-click="textshow(showDiv = ! showDiv)" style="text-decoration: none;"># {{x.title}}
</a>
<hr>
</a>
</b>
</div>
</div>
<div class="text">
<div style="width: 70% ;float:right; background-color: white;">
<div ng-show="showDiv">{{x.text}} </div>
</div>
</div>

Categories