<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.
Related
I am trying to set the NG-Model on an input box (within a form if that matters) but it doesn't seem like it ever gets set on $scope. Everytime I set a breakpoint on the if statement in the controller 'lpScan' is always blank. I've tried to display the {{lpScan}} on screen and it also never seems like it sets there. Anybody have any ideas on why that might be?
Here is the small piece of controller code:
$scope.submitLP = function () {
$scope.lpScan = "";
if (!$scope.checkInForm.$valid) {
$scope.formValidate = 1;
return;
}
if ($scope.scanRequired && $scope.lpScan !== $scope.lp.LPNumber) {
FoundationApi.publish('load-notification',
{
title: 'Invalid LP',
content: 'Must scan current LP to receive it.',
autoclose: '4000'
});
}
and here is the html
<div class="full-block">
<form name="checkInForm">
<div class="center data-item">
<div class="button" ng-click="reprintLP()">Reprint LP</div>
</div>
<div class="data-item" ng-if="scanRequired && !lp.CheckedIn"
</div>
<div class="data-label-narrow">Scan LP:</div>
<div class="data-wide"><input id="assignLP" autocomplete="off" type="tel"
ng-keypress="processKeystroke(event)"
ng-model="lpScan" placeholder="Scan LP" name="LPNumber"
required ng-pattern="/^\d+$/" ng-minlength="20" ng-maxlength="20"
ng-trim="true"/>
<div class="data-error"
ng-if="(checkInForm.LPNumber.$dirty || formValidate === 1) && checkInForm.LPNumber.$invalid">
LPNumber must be 20 digits
</div>
</div>
</div>
</form>
First of all you have a broken div in your example code HTML.
<div class="data-item" ng-if="scanRequired && !lp.CheckedIn"
Try adding ng-change on your input something like ng-change="watchInput()" then in your controller add
$scope.watchInput = function() {
console.log($scope.lpScan);
}
Check your console log and see if you are getting a logging at all. If it is then just place your actionable code inside that function.
Looks like you are resetting your $scope.lpScan variable to blank everytime your submitLP function is fired, so declare it outside your submit function:
$scope.lpScan = "";
$scope.submitLP = function () {...
Here is an example:
https://plnkr.co/edit/jcLsGoVFCXkmv1SnUdHl?p=preview
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
I was wondering if there were no compatibility issues when ng-switch-when and ng-class are using on the same element like in this sample.
I'm trying to dynamically change the class of this four elements but for some reasons this isn't working on all of them, just on the one who's currently displayed.
Does anyone know what's going on here?
<div>
<div ng-switch="sw" ng-init="sw=1">
<div ng-switch-when="1" ng-class="oneClassOrAnother()"></div>
<div ng-switch-when="2" ng-class="oneClassOrAnother()"></div>
<div ng-switch-when="3" ng-class="oneClassOrAnother()"></div>
<div ng-switch-when="4" ng-class="oneClassOrAnother()"></div>
</div>
<div>
<button ng-click="goTo(1)">1</button>
<button ng-click="goTo(2)">2</button>
<button ng-click="goTo(3)">3</button>
<button ng-click="goTo(4)">4</button>
</div>
</div>
Switch between divs.
$scope.goTo = function(x) {
$scope.sw = x;
}
Return one class or the other one.
$scope.oneClassOrAnother= function() {
if (...) return "class1";
else return "class2";
}
Many thanks.
It doesn't look like you're using the ng-class syntax correctly. Try something like this:
<div ng-class="{class1: oneClassOrAnother()}" ng-switch-when="1">1</div>
Where oneClassOrAnother() returns either true or false and "class1" is the name of the class.
Here's a working example of using ng-class and ng-switch-when together: http://plnkr.co/edit/n86SKEktRcPnBy05o8eZ?p=preview
Angular ngClass docs: https://docs.angularjs.org/api/ng/directive/ngClass
I think its all fine with your code, look at this plunk, I reproduced it and its working. Compare this to your code, maybe you have forgotten about controller?
http://plnkr.co/edit/Lz7L3S?p=preview
Only difference i guess is the fact, that I initiated sw from controller, not from view.
<div ng-switch on="sw">
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
}