I'm trying to implement a mechanism to hide / show div within a group meaning that I want to only have one div displayed for the group. Of course, I can implement this using the ng-show directive but I would like to have something more generic.
For example:
<div div-group="mygroup">
<div id="div1"> ... </div>
<div id="div2"> ... </div>
<div id="div3"> ... </div>
</div>
If I call a function like showDiv("div1"), other div would be hidden (div2 and div3). I thought about adding an object on the root scope containing all inner div status (displayed or hidden).
Thanks very much for your help!
Thierry
One way could be using ng-class
.show{
display:block
}
.hide{
display:none;
}
<div div-group="mygroup">
<div id="div1" ng-class={true:'show',false:'hide'}[selecteddiv='div1']> ... </div>
<div id="div2" ng-class={true:'show',false:'hide'}[selecteddiv='div2']> ... </div>
<div id="div3" ng-class={true:'show',false:'hide'}[selecteddiv='div3']> ... </div>
</div>
$scope.choose=function(id){
$scope.selecteddiv=id;
}
So you could pass proper id as string in function
If you want to do this in vanilla js, you just can write your showDiv function like this
function showDiv(id) {
//hide all divs
document.findElementById('div1').style.display = 'none';
document.findElementById('div2').style.display = 'none';
document.findElementById('div3').style.display = 'none';
//show just the div you want
document.findElementById(id).style.display = 'block'; //or whatever it was before
}
Related
Given an image gallery, where the user can click an image and the selected image will be shown in the gallery below it, how can I use useRef to replace the image in the gallery div with the selected image on click? The idea is that the images will be populating the gallery at the top from an array, so each image will presumably have the useRef applied to it?
HTML
<div class="wrapper">
<div class="row">
<div class="column">
<img src="imageurl" alt="water" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="imageurl2" alt="tree" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="imageurl3" alt="snow" style="width:100%" onClick="myFunction(this);">
</div>
<div class="column">
<img src="imageurl4" alt="mountain" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="imageurl5" alt="tree2" style="width:100%" onclick="myFunction(this);">
</div>
</div>
<div class="container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:100%">
<div id="imgtext"></div>
</div>
</div>
Function to toggle large image visibility
const myFunction = imgs => {
const imageRef = useRef();
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}
The current state can be seen here: jsFiddle
As the React Docs state: Don’t Overuse Refs
Your code snippet is not what refs should be used for. In React, you should make things interactive via state changes, not by fiddling with the DOM, React is designed to do that for you.
However from that jsfiddle, it looks like you aren't even using React? I am unsure why you are using useRef at all?
UPDATE: Code fix
By using function to define your function (instead of an arrow function), it gets hoisted so your HTML elements can pick it up, and the getElementById method gets you the element reference you need.
Just replace all your js with:
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
function myFunction(imgs) {
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}
...and your jsfiddle works.
I have a div-layer which dynamically loads html-partials from the server. The template variable is changed when a link in the navigation is clicked.
<div id="ajaxwrapper" ng-include="template">
</div>
This works fine. But the templates need a short time to load and during that time the user doesn't get any kind of response. Thats why I want to display a spinner until the template is load. Sadly I don't know how.
My links look something like this:
<a ng-click="navi($event)" href="www.someurl.de">Text</a>
The navi-function looks like this:
$scope.navi = function (elem) {
elem.preventDefault();
var urlstring = "";
if (typeof elem.target.href !== 'undefined') {
urlstring = elem.target.href;
$location.path(elem.target.pathname).search({ knt: $scope.aktuellesVertragskonto.nr });;
} else {
urlstring = elem.target.baseURI
$location.path("/");
}
$scope.template = $location.absUrl();
};
I need some pointers on how to implement a spinner. Thank you :)
The spinner-template would look like this:
<script type="text/ng-template" id="loader">
<div class="text-center">
<img src="~/images/spinner/ajax-loader.gif" /><br />
Loading
</div>
The ng-include directive includes an onload expression (reference), so you can do something like this:
<div id="ajaxwrapper"
ng-show="loaded"
ng-include="template" onload="loaded = true">
</div>
<div class="text-center"
ng-hide="loaded">
<img src="~/images/spinner/ajax-loader.gif" /><br />
Loading
</div>
There is another way as well, as ng-include override inside div html so you can show loader till template loads.
You can put loader inside the div as below.
<div id="ajaxwrapper" ng-include="template">
// Show loader image or css
</div>
I am trying to implement some directive, which will be based on the value of one variable in other Service. Here is my code:
if (this.SomeService.variable.condition){
element.show();
} else {
element.hide();
};
However, it is called only once, when the page is bootstraped. How can I make it so that if the variable changes, the element shows/hides? Is there any way to do it without watcher?
You can use ng-show / ng-hide that are angularjs construct used to hide or show a particular piece of HTML.
For example:
<div ng-show="true">HELLO I AM THE FIRST DIV</div>
<div ng-hide="true">HELLO I AM THE SECOND DIV</div>
will return something like
HELLO I AM THE FIRST DIV
Inside ng-show you can put watherver kind of variable so then if your javascript is something like this:
angular.module('mymodule').controller('MyCtrl',[function(){
var self = this;
self.isVisible = true;
}]);
you can use that variable in your code:
<div class="container" ng-controller="MyCtrl as c">
<div ng-show="c.isVisible">HELLO I AM THE FIRST DIV</div>
<div ng-hide="c.isVisible">HELLO I AM THE SECOND DIV</div>
</div>
And the result is the same
<div id="c2"><img ng-hide="myValue" ng-src="D:/AngularJS/images/Assets/WIP.png" /></div>
<div id="c3" ng-hide="myValue1" class="ng-hide"><img ng-hide="myValue1" ng-src="D:/AngularJS/images/Assets/compleated.png" /></div>
// create angular controller
validationApp.controller('mainController', function($scope) {
// function to submit the form after all validation has occurred
$scope.myvalue=true;
$scope.submitForm = function() {
// check to make sure the form is completely valid
};
Try with this:
<div id="c2"><img ng-hide="myvalue" ng-src="D:/AngularJS/images/Assets/WIP.png" /></div>
<div id="c3" ng-hide="myValue1" class="ng-hide"><img ng-hide="myValue1" ng-src="D:/AngularJS/images/Assets/compleated.png" /></div>
scope is case-sensitive, change myValue to myvalue
Check codepen : http://codepen.io/anon/pen/JGdgby
You can use below code.
<img ng-cloak ng-if="message.Attachment" ng-src="path here" alt=" {{message.Attachment}}">
I will omit unnecessary details
<img ng-hide="cond" ng-click="cond = !cond" ... />
Also, you can use not only click event. You can use an any condition you want. Just try change cond variable in some other place and check what happen.
I'm using ngInfiniteScroll in AngularJS for a specific container.
Simple example
html
<div id="containerInfiniteScroll" class="container">
<div infinite-scroll="next()" infinite-scroll-disabled="disabled" infinite-scroll-distance="1" infinite-scroll-container='"#containerInfiniteScroll"'>
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-12">
<span data-ng-repeat="el in elements | limitTo:limit">
{{el}}
</span>
</div>
</div>
</div>
</div>
css
.container{overflow-y:scroll;}
js
//Varibles...
$scope.elements = ['element1','element2','element3','...','elementn'];
$scope.limit=50;
$scope.disabled = false;
//Function that infinte-scroll calls:
$scope.next = function(){
$scope.limit=$scope.limit+50;
$scope.disabled = $scope.limit>=elements.length;
};
The ngInfiniteScroll works as expected for contentInfiniteScroll content. Except this case...
Don't charge more elements if the scroll-y of the page (not the
scroll of the container) is on bottom.
And only don't work in this case...
What am I doing wrong? It's me, or maybe I need to retouch the library ngInfiniteScroll.js ?
Thank you.