I know you can select multiple files like this using "Jquery":
selection.map( function( attachment ) {
attachment = attachment.toJSON();
$("#something").after("<img src=" +attachment.url+">");
});
but how is selecting multiple files done with Angular.js
From the code snippet, we can assume that you have an array selection that look something like this:
$scope.selection = [
{url: 'http://......', otherKey: 'otherValue1'},
{url: 'http://......', otherKey: 'otherValue2'},
.....
];
And you're appending image to a DIV with ID #something. The view should contain ngRepeat for iterating the objects inside selection and IMG tag with ngSrc with the url of each image. Something like:
<div id="something">
<img ng-repeat="img in selection" ng-src="{{ img.url }}" />
</div>
I'm assuming you know how to add a controller and you learned how to bing properties from the controller to the view using $scope.
Related
I am using bootbox, I need display product information in it. The product information is returned as json with rest call. I am thinking using a template, and transform from the json to html. I need ng-repeat etc, in the template. The idea way is I can call template and get a html result.
But it seems angularjs $compile need bind to element to render. any idea?
I think you can use ng-include:
var app = angular.module('myApp', []);
app.controller('productCtrl', function($scope) {
$scope.productInfos = [];
});
Use ng-include (You have to the adjust the path depending the location of your template)
<div ng-app="myApp" ng-controller="productCtrl">
<div ng-include="'product-information.html'"></div>
</div>
You can do ng-repeat in product-information.html:
<div ng-repeat= "info in productInfos"> {{ info.prop1 }}</div>
I need to show a picture in a blade view loaded dynamically with AngularJS.
this is the short piece of code causing me many headaches since many days:
<img ng-src="#{{ $video.thumb }}" width="57">
if I put #{{ $video.thumb }} outside the img ng-src I get the correct path of the image.
I wouldn't change the whole app using interpolate provider.
var sampleApp = angular.module('sampleApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
More in HTML if I search with the inspector for the img tag I can't see anything, just
<img width="57">
I'm running it locally.
Please help me
I post the solution if someone else need it.
I had to use the full url in the ng-src.
Since I'm using Laravel and I'm working on a Blade view I had to use the following code:
<img ng-src="{{ url('/') }}/storage/#{{ video.thumb }}" width="57">
with {{ url('/') }} to get the domain url, then added /storage/ because I saved my files in that folder and at the end the angular var.
In my project called App, I have a controller, which contains a complex object that has a field referencing App/img/blue.jpg:
myApp.controller("myController",function($scope){
$scope.message = "Home Page";
$scope.Photo1 = {
name: "blue_bird",
image:"/img/blue.jpg"
};
});
However the image is not loading when I do this:
<img src="{{Photo1.image}}" />
I also tried changing the image field to img/blue.jpg and ~/img/blue.jpg, none works. When I change image to a web link, though, it works
Read the documentation here.
Using Angular markup like {{hash}} in a src attribute doesn't work
right: The browser will fetch from the URL with the literal text
{{hash}} until Angular replaces the expression inside {{hash}}. The
ngSrc directive solves this problem.
The buggy way to write it:
<img src="{{Photo1.image}}"/>
The correct way to write it:
<img ng-src="{{Photo1.image}}"/>
Found the answer. In the Projects panel on the left hand side of the window, click the Files tab, drag the file into the editing area, right between the quotation marks of the src="" attribute. The img tag then looks like this:
<img src="../img/blue.jpg" alt="" />
So the object in the controller should look like:
$scope.Photo1 = {
name: "blue_bird",
image:"../img/blue.jpg"
};
And in View:
<img ng-src="{{Photo1.image}}"/>
I have static page with articles and I would like to fill number of likes for each article from json with angularjs. Is that posible or do I need to load whole page as template and fill all the detail with ng-repeat?
Is there something like
$("#like id" + i).val(jsonarray[i])
for angularjs?
Assign the array to the scope and use the interpolation {{ }} and ng-repeat in the HTML
JS Controller:
$scope.jsonarray = jsonarray;
HTML:
<div ng-repeat="value in jsonarray">{{value}}</div>
Or:
<div id="like">{{jsonarray[0]}}</div>
I have tried this every-which-way and still no luck. Please bear with me, I am a designer by trade.
I have created a Plunker of where I am so far.
I am using Angular Google Maps to create a map upon which I would like to output my markers, clicking one of which will open its info-window. Within each info window I would like to have some interactive content e.g. buttons, links, marching bands etc
My problem is multi-faceted:
When I place the info window html inside the tag none of the variables are displayed unless a ng-non-bindable is placed on a parent. However, I want the content to be interactive. As you will see in my code, the button does nothing.
<ui-gmap-windows show="show">
<div class="markerwindow" ng-non-bindable>
<h1>{{ title }}</h1>
<p>{{ message }}</p>
<footer>
Google
<button click="buttonClick(id)">Button</button>
</footer>
</div>
</ui-gmap-windows>
I cannot separate the template out into a separate file [I expect the info window to end up being pretty significant] using templateUrl on the without this error:
"Possibly unhandled Error: error within chunking iterator: Error:
[jqLite:nosel] Looking up elements via selectors is not supported by
jqLite!"
<ui-gmap-windows show="show" templateUrl="templates/window.html">
</ui-gmap-windows>
Finally, I weep to myself sometimes when I read documentation...
Could someone help me identify the issues with my approach? I would really appreciate even a flake of help because I'm really struggling to see a way over this obstacle at the moment.
Thanks in advance.
The templateURL attribute is a property on your marker object. Here is some code I'm currently working on:
function createMarkers(data) {
$scope.markers = data.map(function(marker){
var tags = marker.tags.map(function(tag){
return {
tag: tag.tag,
url: tag.url
}
})
return ({
id: marker.id,
latitude: marker.position.lat,
longitude: marker.position.lng,
info: {
title: marker.item,
description: marker.note,
place: marker.position.place,
tags: tags
},
template: "views/partials/main/gmapWindow.html"
})
})
}
As you can see I have a property named template that contains an url to a template (partials might not be the best naming...). Also note that I have a property called info that contains stuff like title and description.
My ui-gmap-google-map-directive looks like this:
<ui-gmap-google-map center='map.center' zoom='map.zoom'>
<ui-gmap-markers models="markers" coords="'self'" icon="'icon'">
<ui-gmap-windows
templateUrl="'template'"
templateParameter="'info'"
show="'showWindow'"
closeClick="'closeClick'"
></ui-gmap-windows>
</ui-gmap-markers>
</ui-gmap-google-map>
Note that I use both " as well as ' in templateUrl and templateParameter. templateUrl is the property that contains a string to a template (this way we can use different template for different markers) and templateParameter is also a property in the markers-model. That property contains an object that we pass into the template.
Finally we can create our template and access the object that we passed into it, in my case the info-object that where a property on the model.
<div>
<h3>{{ :: parameter.title }}</h3>
<p><em>{{ :: parameter.description }}</em></p>
<p><strong>{{ :: parameter.place }}</strong></p>
<p class="muted">Tags: <tags marker="{{ :: parameter.tags }}" /></p>
</div>
Oh, and I weep as well when reading the documentation...