How to display all the images in the form of grid, which all will come from back end, so the images are in the dynamic form. and I have to put Description as well on those images, and those Description are also coming from Back End in AngularJS?
If image data is coming in array then you can show image using ng-repeat directive.
Controller
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.imageList = allImage;
});
HTML
<div class="col-md-3" ng-repeat="image in imageList track by $index">
<img src="{{image.imageUrl}}" />
<label> {{image.description}} </label>
</div>
You can use ng-repeat for showing you image with description like:
<li class="col-sm-3" ng-repeat="product in productList">
<img src={{product.imageUrl}} />
<label>{{product.description}}</label>
</li>
Here is the documentation
Related
I am creating a weather web app based on API from openweather.com using Spring-Boot and Angular.
I am also using this weather-icons package.
In my HTML file weather icons are displayed like this:
<div class="jumbotron">
<i class="wi wi-snow" style="font-size: 8em;"></i>
<i id="description">{{weather.weatherID}}</i>
</div>
With the help of API I have also weather code value available in html.
Let's say I have a file weather.data with weather codes mapped to icon description like this:
601: snow
602: sleet
611: rain-mix
Is it possible to display certain icon in HTML based on value in data file?
What I want to do is something like:
<div class="jumbotron">
<i class="wi wi-{{weatherDescription}}" style="font-size: 8em;"></i>
</div>
You can get your data from weather.data in a scope variable.
It would be like:
In Controller:
$http.get(path of weather.data file, null, function(response){
$scope.weatherList = response; //do angular.fromJson if required
});
I hope you are getting a JSON object as :
$scope.weatherList = {
601: "snow",
602: "sleet",
611: "rain - mix"
}
If you are getting weather code from server side in weatherDescription, then you can use it like this on html :
In Html:
<div class="jumbotron">
<i class="wi wi-{{weatherList[weatherDescription]}}" style="font-size: 8em;"></i>
</div>
I hope this works for you.
I am new to react and I want to display array of images in react webpage. The array has statis number of images.
render: function() {
console.log("edit");
return (
<div>
<Button bsStyle="info" id="qslist" onClick={this.show}>View</Button>
<Button bsStyle="info" id="qslist" className="delete" onClick={this.handleDelete}>Delete</Button>
<Button bsStyle="info" id="qslist" className="disable" onClick={this.handleDisable}>Disable</Button>
<Modal show={this.state.showModal} onHide={this.close}>
<Modal.Header closeButton>
<Modal.Title></Modal.Title>
</Modal.Header>
<Modal.Body>
<div id="formdata1">Name:<b>{name}</b></div>
<div id="formdata1">User:<b>{user}</b></div>
<div id="formdata1">Radius:<b>{radius}</b></div>
<div id="formdata1">Status:<b>{status}</b></div>
<div id="formdata1">Type:<b>{type}</b></div>
<div id="formdata1">Latitude:<b>{lat}</b></div>
<div id="formdata1">Longitude:<b>{long}</b></div>
<div id="formdata1">Description:<b>{caption}</b></div>
<div id="formdata1">Schedule:<b>{schedule}</b></div>
<div id="formdata1">Duration:<b>{duration}</b></div>
<div id="formdata1">lshare:<b>{lshare}</b></div>
<div id="formdata1">Id:<b>{listingid}</b></div>
<Image src={imgs} rounded />
</Modal.Body>
<Modal.Footer>
<Button onClick={this.close} bsStyle="info" id="solbutton">Close</Button>
</Modal.Footer>
</Modal>
</div>
);
}
in the above code in image i am trying to display array of images. Currently it is possible to display only one image <Image src={image} rounded/>. How to display many number of images. The array images are in
[
'http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg',
'http://wallpaper-gallery.net/images/image/image-13.jpg',
...
]
If you just want to display an array of images (for whatever reason), you can do the following:
In the beginning of the render method (next to the console log) add this:
var images = imgs.map(function(image) {
return (<Image src={image} rounded />);
});
This will map your paths array into an array of Image components (where imgs is an array of paths like you specified).
Then, replace
<Image src={imgs} rounded/>
With
{images}
And that's it.
In case you want some kind of carousel, there are a number of packages available (example), where you can just define something like:
<ImageGallery items={imgs} />
The html code goes something like this:
<div ng-if="name=='John'">
<div class="item item-avatar"> <img ng-src="john.jpg"></div>
</div>
<div ng-if="name=='Margaret'"
<div class="item item-avatar"> <img ng-src="margaret.jpg"></div>
</div>
Instead of ng-if, I've tried using ng-show as well. Neither worked. Both John as well as Margaret showed on the page no matter which I used. I tried with ng-switch also.
The variable 'name' I initialized earlier on the same HTML file as:
<a class="item item-avatar item-icon-right" ng-init="name = 'John'" href = "#/Page3"></a>
Clicking on the above line leads to Page3 where I need to display either John or Margaret depending on the value of 'name'.
Is the syntax wrong or something, because that could be very well possible. I'm new to Ionic and AngularJS.
Try this:
<div ng-show="name=='John'" ng-init="name = 'John'">
<div class="item item-avatar"> John</div>
</div>
<div ng-show="name=='Margaret'"
<div class="item item-avatar"> Margaret</div>
</div>
Works for me. I just change ng-if to ng-show - which will shows div content when true and hide it otherwise. I also use ng-init inside a div.
Are you sure you started Angular? Did you set the ng-app directive?
It would help if you could provide a working example if you have other problems.
angular.module('app', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-init="name = 'John'">
<button type="button" ng-click="name='John'">John</button>
<button type="button" ng-click="name='Margaret'">Margaret</button>
<div ng-if="name=='John'">
This is John
</div>
<div ng-if="name=='Margaret'">
This is Margaret
</div>
</div>
I fixed you plunker - now it should be working.
Bug #1: ng-init is for initialization not to set values at runtime -> use ng-click instead
Bug #2: You use the same controller for all pages but for each page a new controller will be initialized, which resets the 'name' property
I implemented a setName function to set the name in the rootscope and to go to page3. In a correct implementation you should pass the name as a $stateparam to the new state/page. But for that please have a look at the ui-router documentation.
$scope.setName = function(name) {
console.log(name);
$rootScope.name = name;
$state.go('Page3');
};
I am trying to clone elements when clicking a button. I was trying to use ko.toJS. On page load it works fine, but when I want clone the items, it is unable to bind the items (like, value, Text, etc.).
Here is the HTML:
<div class="stockItems-inner" data-bind="foreach: StockItems">
<div data-bind="if: Type=='Input'">
<div class="stock_container_input">
<input type="text" data-bind="value: Value" />
</div>
</div>
<div data-bind="if: Type=='Radio'">
<div class="stock_container_control">
<div data-bind="foreach: Options">
<div class="stockLbl">
<input type="radio" data-bind="text: Text, checked:$parent.Value, attr:{'id':Id, 'name': $parent.Text, 'value': Value}" />
<label data-bind="attr:{'for':Id}, text: Text"></label>
</div>
</div>
</div>
</div>
</div>
<div class="addItem">
<button type="button" data-bind="click: CloneItem"><img src="images/add.png" alt="" /></button>
</div>
The View Model:
ConfigurationStockViewModel = function() {
var self = this;
this.StockItems = ko.observableArray();
this.ApplyData = function(data){
self.StockItems(data.Items);
}
this.CloneItem = function(StockItems){
self.StockItems.push(ko.toJS(StockItems));
};
};
When clicking the button, an error is thrown: Unable to process binding. I am using JSON data for binding.
Not exactly sure what end result you want without working code, but sounds like you want to clone the last item in array and add to array?
If so, I think you have an error - your add button click binding will never pass anything to the function you defined, since it is outside the foreach. You need something like this:
this.CloneItem = function() {
var toClone = self.StockItems()[self.StockItems().length - 1]
self.StockItems.push(toClone);
};
Here is a simplified example without radio buttons, etc:
http://jsfiddle.net/5J47L/
I have a problem with toggle on this list:
<div id="list">
<div id="segment"> // <--- when clicked, toggle segm_content and opener
<div id="opener">
<img src="images/open.png" /> // changes when toggled
</div>
<div id="segm_content">
// content to hide/show
</div>
</div>
<div id="segment"> // <--- when clicked, toggle segm_content and opener
<div id="opener">
<img src="images/open.png" /> // changes when toggled
</div>
<div id="segm_content">
// content to hide/show
</div>
</div>
... //and so on
</div>
I want clicked "#segment" to toggle child *"#segm_content"* and change img in "#opener".
I made it working with this code:
$('#segment').toggle(function() {
$('#opener').html('<img src="images/open.png"/>');
$('#segm_content').hide(500);
}, function() {
$('#opener').html('<img src="images/close.png"/>');
$('#segm_content').show(500);
});
But I can't figure out how to do it only for one "#segment" at a time.
This code toggles everything, which I don't want.
I am stuck at this point, any suggestions please?
Many thanks!
I really wouldn't recommend this. The point of an id is to reference a unique element. If you want to select multiple elements, you should define a class instead and have jQuery call that. Multiple ids is invalid HTML. But you could, per sé, do this by using changing your jQuery code to the following.
(Here is my jsFiddle: http://jsfiddle.net/KzVmK/)
$('[id="segment"]').toggle(
function(){
$(this).find('[id="opener"]').html('<img src="open.png" alt="Close" />');
$(this).find('[id="segm_content"]').hide(500);
},
function(){
$(this).find('[id="opener"]').html('<img src="close.png" alt="Open" />');
$(this).find('[id="segm_content"]').show(500);
}
);
Again, let me stress again that this is a bad idea, because you will not have unique id selectors in your document. This is really bad practice. There are times when you will want to select an individual element in the DOM and this will make that next to impossible. I would highly advise you to define a class for the elements (you can still define CSS classes, e.g. <div class="opener my-class" /> or <div class="segm_content my-class" />).
(Also, a helpful tip with this code: rather than populating the HTML elements with the same image that is also in the jQuery code [which is redundant], leave the <div id="opener" /> elements empty. Then, right after you define the toggle function, run the click event, like so: $('[id="$segment"]').toggle(...).click();
http://jsfiddle.net/XPXBv/).
General Theme Settings
Back-Ground Color
Text Color
<div class="Settings" id="GTSettings">
<h3 class="SettingsTitle"><a class="toggle" ><img src="${appThemePath}/images/toggle-collapse-light.gif" alt="" /></a>Content Theme Settings</h3>
<div class="options">
<table>
<tr>
<td><h4>Back-Ground Color</h4></td>
<td><input type="text" id="body-backGroundColor" class="themeselector" readonly="readonly"></td>
</tr>
<tr>
<td><h4>Text Color</h4></td>
<td><input type="text" id="body-fontColor" class="themeselector" readonly="readonly"></td>
</tr>
</table>
</div>
</div>
$(document).ready(function(){
$(".options").hide();
$(".SettingsTitle").click(function(e) {
var appThemePath = $("#appThemePath").text();
var closeMenuImg = appThemePath+'/images/toggle-collapse-light.gif';
var openMenuImg = appThemePath+'/images/toggle-collapse-dark.gif';
var elem = $(this).next('.options');
$('.options').not(elem).hide('fast');
$('.SettingsTitle').not($(this)).parent().children("h3").children("a.toggle").children("img").attr('src', closeMenuImg);
elem.toggle('fast');
var targetImg = $(this).parent().children("h3").children("a.toggle").children("img").attr('src') === closeMenuImg ? openMenuImg : closeMenuImg;
$(this).parent().children("h3").children("a.toggle").children("img").attr('src', targetImg);
});
});