I have a array with image source. I need to show this images in ng-repeat. I am not able to fetch need assistance.
var images = ["http://35.154/media?request={"request":{"service":{"servicetype":"6","functiontype":"1013","session_id":966},"data":{"mediaids":171}}}",
"http://35.154/media?request={"request":{"service":{"servicetype":"6","functiontype":"1013","session_id":966},"data":{"mediaids":252}}}",
"http://35.154/media?request={"request":{"service":{"servicetype":"6","functiontype":"1013","session_id":966},"data":{"mediaids":97}}}",
"http://35.154/media?request={"request":{"service":{"servicetype":"6","functiontype":"1013","session_id":966},"data":{"mediaids":411}}}"]
html :
<div ng-repeat = "image in images">
{{image}}
</div>
You should use <img ng-src="{{image}}" /> and also wrap you image urls with single quotes(because there are double quotes in your URL).
var app=angular.module("myApp",[]);
app.controller('myCtrl',function($scope){
$scope.images = ['http://35.154/media?request={"request":{"service":{"servicetype":"6","functiontype":"1013","session_id":966},"data":{"mediaids":171}}}',
'http://35.154/media?request={"request":{"service":{"servicetype":"6","functiontype":"1013","session_id":966},"data":{"mediaids":252}}}',
'http://35.154/media?request={"request":{"service":{"servicetype":"6","functiontype":"1013","session_id":966},"data":{"mediaids":97}}}',
'http://35.154/media?request={"request":{"service":{"servicetype":"6","functiontype":"1013","session_id":966},"data":{"mediaids":411}}}'];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="image in images">
<img ng-src="{{image}}" />
</div>
</div>
Related
Question is quite simple but i am not able to hide image. Here is the code.
I am fetching the image details from database and showing them in grid format. Here is the code.
<span class="close" id="close">×</span>
<div class="my-gallery" itemscope id="grid" >
<figure itemprop="associatedMedia" >
<a href="{{imageUrl}}" id="thumb" name="{{pid[$index]}}" class="thumbnail " itemprop="contentUrl" data-id="{{pid[$index]}}" data-size="800x600">
<img src="" class="img-responsive " data-id="{{pid[$index]}}" id="{{pid[$index]}}" ng-src="{{thumb[$index]}}" style="min-height:50px;height:50px;">
</a>
</figure>
</div>
</div>
and here are more code.
$scope.myFunc = function(btnId) {
alert(btnId);
document.getElementById(btnId).style.visibility = "visible";
};
I want to hide the respective image. there could be multiple image but image id is different. So, what i want is when user click on any image it will hide.
Please advise how can i do that.
First of all Don't use getElementById.In angular you can simple bind the $scope variable.
Have a variable with the image object to show/hide. Make it true or false when you need to show/not.
On ng-click you can set the variable to be false. bind the variable to the element, so that you can hide whenever necessary.
<div ng-if="img.show">
<img src="" class="img-responsive " data-id="{{pid[$index]}}" id="{{pid[$index]}}" ng-src="{{thumb[$index]}}" style="min-height:50px;height:50px;">
</a>
</div>
DEMO
angular.module('webapp', [])
.controller('AppCtrl', function($scope) {
$scope.data = [
{
"id": 5454554,
"Url": "https://farm4.staticflickr.com/3261/2801924702_ffbdeda927_d.jpg",
"show":true
},
{
"id": 5454554,
"Url": "https://farm4.staticflickr.com/3261/2801924702_ffbdeda927_d.jpg",
"show":true
}
];
$scope.hide = function(img){
img.show = false;
}
});
<!DOCTYPE html>
<html ng-app="webapp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>
<body ng-controller="AppCtrl">
<div class="add-pic-box1 col-md-3">
<div ng-repeat="img in data" >
<div ng-if="img.show">
<img class="thumb" ng-model="add_new_ads_mdl.img_add" imgid = "{{img._id}}" src="{{img.Url}}" />
<button ng-click="hide(img)"> HIDE ME </button>
</div >
</div>
</div>
</body>
</html>
You can use ng-click with $event
<div ng-app="app" ng-controller="Ctrl">
Click me
</div>
app.controller("Ctrl", function($scope) {
$scope.removeMe = function(event) {
event.toElement.remove()
};
});
Example
I have two AngularJS apps in one page, I was wondering why the Angular was breaking then realised it was probably because both apps are name the same thing (I'm very new to AngularJS).
What I need to know if what I need to change to differentiate between them if this makes sense.
This is my code with the two apps in separate divs NorthWest and NorthEast.
If anyone could help me with this I would be very grateful,
Thanks, in advance!
<div id="NorthWest" class="desc">
<script>
var app = angular.module('myApp', []);
app.controller('regionsLinks', function($scope, $http) {
var url = 'http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=northwest';
$http.get(url).then(function (data) {
$scope.data = data.data;
});});
app.controller('regionsLinks1', function($scope, $http) {
var url = 'http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=northeast';
$http.get(url).then(function (data) {
$scope.data = data.data;
});});
</script>
<div ng-app="myApp">
<div ng-controller="regionsLinks">
<div ng-repeat="d in data">
<h2 class="entry-title title-post">{{d.title}}</h2>
<img src="{{d.acf.logo}}">
<div id="listing-contact">Contact: {{d.acf.contact}}, {{d.acf.position}}</div>
<div id="listing-address-1">
{{d.acf.address_1}},
{{d.acf.address_2}}
{{d.acf.address_3}}
{{d.acf.town}}
{{d.acf.county}}
{{d.acf.postcode}}
</div>
<div id="listing-phone">Telephone: {{d.acf.telephone}}</div>
<div id="listing-mobile">Mobile: {{d.acf.mobile}}</div>
<div id="listing-email">Email: {{d.acf.email}}</div>
<div id="listing-website">Website: {{d.acf.website}}</div>
<div id="listing-established">Established: {{d.acf.established}}</div>
<div id="listing-about">About: {{d.acf.about}}</div>
<div id="listing-mailingaddress">
Mailing Address: {{d.acf.mailing_address_}}, {{d.acf.mailing_address_2}},
{{d.acf.mailing_address_3}}, {{d.acf.mailing_town}}, {{d.acf.mailing_county}}, {{d.acf.mailing_postcode}}
</div>
<div id="listing-directions">Directions: {{d.acf.directions}}</div>
<div id="scd-link">View on The Shooting Club Directory</div>
</div>
</div>
<div id="NorthEast" class="desc">
<div ng-controller="regionsLinks1">
<div ng-repeat="d in data">
<h2 class="entry-title title-post">{{d.title}}</h2>
<div id="listing-address-1">
{{d.acf.address_1}},
{{d.acf.address_2}}
{{d.acf.address_3}}
{{d.acf.town}}
{{d.acf.county}}
{{d.acf.postcode}}
</div>
</div>
</div>
</div>
</div>
You can have two Angular applications in page, but only one of them can be auto-bootstrapped with ng-app.
You can instantiate your apps (yes, give them different, meaningful names) by bootstrapping them manually.
In your case, I think it makes more sense to have just one application with two controllers, one for NorthWest and one for NorthEast.
For this case, you can simply have one controller, because both div blocks needs same data to bind. Try it
<script>
var app = angular.module('myApp', []);
app.controller('regionsLinks', function($scope, $http) {
var url = 'http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=northwest';
$http.get(url).then(function(data) {
$scope.data = data.data;
});
});
</script>
<div ng-app="myApp" ng-controller="regionsLinks">
<div id="NorthWest" class="desc">
<div ng-repeat="d in data">
<h2 class="entry-title title-post">{{d.title}}</h2>
<img src="{{d.acf.logo}}">
<div id="listing-contact">Contact: {{d.acf.contact}}, {{d.acf.position}}</div>
<div id="listing-address-1">
{{d.acf.address_1}}, {{d.acf.address_2}} {{d.acf.address_3}} {{d.acf.town}} {{d.acf.county}} {{d.acf.postcode}}
</div>
<div id="listing-phone">Telephone: {{d.acf.telephone}}</div>
<div id="listing-mobile">Mobile: {{d.acf.mobile}}</div>
<div id="listing-email">Email: {{d.acf.email}}</div>
<div id="listing-website">Website: {{d.acf.website}}</div>
<div id="listing-established">Established: {{d.acf.established}}</div>
<div id="listing-about">About: {{d.acf.about}}</div>
<div id="listing-mailingaddress">Mailing Address: {{d.acf.mailing_address_}}, {{d.acf.mailing_address_2}}, {{d.acf.mailing_address_3}}, {{d.acf.mailing_town}}, {{d.acf.mailing_county}}, {{d.acf.mailing_postcode}}</div>
<div id="listing-directions">Directions: {{d.acf.directions}}</div>
<div id="scd-link">View on The Shooting Club Directory</div>
</div>
</div>
<div id="NorthEast" class="desc">
<div ng-repeat="d in data">
<h2 class="entry-title title-post">{{d.title}}</h2>
<div id="listing-address-1">
{{d.acf.address_1}}, {{d.acf.address_2}} {{d.acf.address_3}} {{d.acf.town}} {{d.acf.county}} {{d.acf.postcode}}
</div>
</div>
</div>
</div>
$valid does not work on dynamically loaded forms via ng-include or I do a mistake (I can't change the style of the Box on form validation):
Here is the plunker: http://plnkr.co/edit/WA5ohXoMrb5QcUdl0uwe?p=preview
If the text input field is filled, the color should be changed from black to green.
HTML
<body ng-controller="MainController">
<div class="menu-mantle">
<div ng-repeat="item in my.forms" class="menu-box">
<div class="auWizard-default" ng-class="{
'auWizard-valid': {{item.form_name}}.$valid,
'auWizard-invalid': {{item.form_name}}.$invalid}">
</div>
<div class="menu-default" ng-click="my.getForm(item.form_name)">
{{item.form_name}}
</div>
</div>
</div>
<h4>Forms will be included below:</h4>
<div class="form-area">
<h5>{{my.src}}</h5>
<ng-include src="my.src">
</ng-include>
</div>
</body>
Tracking current Form name in controller by
$scope.my.getForm= function (form) {
$scope.currentform=form;
$scope.my.src=form+".html";
}
I moved <form> tag from individual file to index file and it is working now.
<form name={{currentform}}>
<ng-include src="my.src">
</ng-include>
</form>
Working plunker link
Try this
<body ng-controller="MainController">
<div class="menu-mantle">
<div ng-repeat="item in my.forms" class="menu-box">
<div class="auWizard-default" ng-class="{
'auWizard-valid': isFormValid(item.form_name),
'auWizard-invalid': !isFormValid(item.form_name)}">
</div>
<div class="menu-default" ng-click="my.getForm(item.form_name)">
{{item.form_name}}
</div>
</div>
</div>
<h4>Forms will be included below:</h4>
<div class="form-area">
<h5>{{my.src}}</h5>
<ng-include src="my.src">
</ng-include>
</div>
</body>
In your controller
$scope.isFormValid = function(formName){
var formSelector = 'form[name='+formName+']';
var formEle = $(formSelector);
var formScope = angular.element(formEle).scope();
if(formScope){
return formScope[formName].$valid;
}
}
I have an ng-repeat which shows a list of sports and next to every sport name I'd like to display an specific image. I'd like to know how to go about displaying the correct png for every sport. How could I make it know what image to display? Here's how the code looks like.
<div ng-if="sport.leagues.length && sport.checked"
ng-repeat="sport in sports">
<ion-list class="list">
<div class="item">
<img src="" class="sport-image"> <!--Heres where img shoud be-->
<span>{{sport.name}}</span>
</div>
</ion-list>
</div>
I am supposing you want the image based on a key (like sport name). You can maintain a javascript object in your controller with key as name and value can be url of the image
obj = {football:'myurl'}
and use this object as
<div ng-if="sport.leagues.length && sport.checked"
ng-repeat="sport in sportsFilter = ( sports | sportsFiltered:query )">
<ion-list show-delete="sport.showStars"
class="list">
<div class="item">
<img ng-src="{{obj[sport.name]}}" class="sport-image"> <!--Heres where img shoud be-->
<span>{{sport.name}}</span>
</div>
You should use ng-src instead of src, so that you can pass the variable into it representing the current image to display, without risking an error 404 while the angular expression isn't parsed yet:
<img ng-src="{{sport.image}}" />
In JS part, you would merely have in your controller a kind of:
$scope.sport = {image: "http://myServer.com/mySuperSportImage.jpg"};
Note that this example doesn't deal with collections to simplify.
This ensures the binding.
You should create an object property for the image:
// HTML
<div ng-app="myApp" ng-controller="MyCtrl">
<div ng-if="sport.leagues.length && sport.checked"
ng-repeat="sport in sports">
<div class="item">
<img width="30" height="30" src="{{ sport.im }}" class="sport-image"> <!--Heres where img shoud be-->
<span>{{sport.name}}</span>
</div>
</div>
</div>
// JS
angular.module('myApp',[])
.controller('MyCtrl', function($scope) {
$scope.sport = {
leagues: ['premier', 'championship'],
checked: true
};
$scope.sports = [
{
name: 'soccer',
im: 'http://upload.wikimedia.org/wikipedia/en/e/ec/Soccer_ball.svg'
},
{
name: 'basketball',
im: 'http://upload.wikimedia.org/wikipedia/commons/7/7a/Basketball.png'
}
];
});
See this fiddle:
http://jsfiddle.net/uxu21n4v/1/
<img ng-src="http://www.gravatar.com/avatar/{{sport.imageLocation}}" class="sport-image"/>
Ref: https://docs.angularjs.org/api/ng/directive/ngSrc
How do I access the next()/prev() methods of the carousel from the slide? I'm trying to connect to hm-swipe-left/right, but I don't seem to have the right $scope
<carousel interval="1000">
<slide ng-repeat="card in slides" active="card.active">
<div class="card list-unstyled text-center">
<ul class='header list-inline list-unstyled'
hm-swipe-left="swipe('next')"
hm-swipe-right="swipe('prev')">
<li><i class="icon {{card.icon}} fa-3x"></i></li>
<li class="title">{{card.title}}</li>
</ul>
</div>
</slide>
</carousel>
I was looking for a solution to this. I'll post what I finally did:
In the controller where you have the carousel (make sure your html carousel has id="myCarousel"):
$scope.showNext = function(){
var index = ($('#myCarousel .active').index()+1)%(slides.length);
var modIndex = (((index)%(slides.length))+(slides.length))%(slides.length);
$scope.slides[modIndex].active=true;
}
$scope.showPrev = function(){
var index = ($('#myCarousel .active').index()-1)%(slides.length);
var modIndex = (((index)%(slides.length))+(slides.length))%(slides.length);
$scope.slides[modIndex].active=true;
}
Then in your HTML page:
<img ng-src="{{slide.image}}" style="margin:auto;" ng-swipe-right="showPrev()" ng-swipe-left="showNext()">
Hope it helps to anyone!
It works for bootstrap 3.0.2 (my version)
EDIT:
Edited the modulus (since there is a bug in javascript when calculating modulus: Javascript modulo not behaving)
Now it works! :)
In my case I was just able to do this
<div ng-swipe-left="$parent.$parent.prev()" ng-swipe-right="$parent.$parent.next()" uib-slide ng-repeat="product in vm.productList track by $index" index="$index">
I am not sure if doing $parent.$parent is advised but it worked perfectly for me and I did not have put jquery/html code in my controller.
Keep in mind I was inside a ng-repeat, it could also be $parent.next() outside of the ng-repeat.
You can get the scope of directive from DOM element and re-use it
var element = angular.element('.carousel .left');
if (element.length > 0 && element.scope && element.scope().prev) {
element.scope().prev();
}
// or
if (element.length > 0 && element.scope && element.scope().next) {
element.scope().next();
}
Here is a slightly simpler solution:
Javascript Controller
$scope.carouselNext = function() {
$('#carousel-main').carousel('next');
}
$scope.carouselPrev = function() {
$('#carousel-main').carousel('prev');
}
HTML View
<div id="carousel-main" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-main" data-slide-to="0" class="active"></li>
<li data-target="#carousel-main" data-slide-to="1"></li>
<!-- add indicators for any slides added -->
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div id="slide1" class="item active" ng-swipe-right="carouselPrev()" ng-swipe-left="carouselNext()">
<!-- img or content here -->
</div>
<div id="slide2" class="item" ng-swipe-right="carouselPrev()" ng-swipe-left="carouselNext()">
<!-- img or content here -->
</div>
<!-- add more slides as needed -->
</div>
</div>