I'm using Angular(1.6.4), and I'm lost as how to change a component from being visible to invisible and vice-versa. For instance, I have this component where I would like to programmatically modify its visibility:
When I go looking for documentation, I see that there is an "ng-hide" command, but that's for the old version of Angular and I'm not able to find how it's done in the current version (1.6.4)
Any help is greatly appreciated.
I'm not sure where you've found that ng-hide is only for old versions of Angular.
ngShow and ngHide directives work fine in version 1.6.4, so feel free to use them for your needs.
Related
I'm looking for an AngularJS carousel module that can mimic exactly the visual format of this picture:
I tried using https://mihnsen.github.io/ui-carousel/ but got errors:
https://github.com/mihnsen/ui-carousel/issues/35
I just need something that works well in AngularJS and visually mimics the picture. Any suggestions?
Have you tried this one? It seems that he's using just bootstrap and some CSS to do it.
//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js
It also shows the scope variables that he uses to get the carousel configured. It's not exactly the same, but it's the closer I found. If it's not what you want, you can do little CSS changes to look like the picture (:
I've found this template and used it with success:
bootsnipp.com/snippets/featured/simple-carousel
I just had to make minor css adjustments and used data-target="#Carousel" instead of href="#Carousel" in the controls.
I believe I have found a bug with ui-bootstrap, I reported an issue here:
https://github.com/angular-ui/bootstrap/issues/4222
Would anyone have any tips on how to write a workaround for this in the meantime until it gets solved?
Basically, angular's animation hooks are not applied to elements within a ui-bootstrap modal, the plunker is posted in the link above
Any help much appreciated
Take a look at this Fiddle that's running Angular 1.0.
Hover over the image, and it works fine (you'll see an overlay over the image.)
What I'm doing is wrapping the element with a container div using .wrap(..) function, and later binding the mouseover event to the container div. It works fine.
However, in Angular 1.3 like in this Fiddle with exactly the same code, the container div doesn't recognize my element as its child, which affects the mouseover event from being triggered.
Am I doing something wrong or is it broken in 1.3 ?
The jump from Angular 1.2.x to 1.3.0 involved a few changes to jqLite. One of which was commit #77d3e75 - fix(jqLite): clone wrapNode in jqlite/wrap.
If you run each, the commit before that works, says 1 child exists. That commit says 0. This is intentional, though. This was to prevent unintended side-effects, and to better match JQuery's implementation.
In fact, a test assertion for your exact usage was added in that commit:
expect(root.children().length).toBe(0);
A solution to this particular case might be to change the code slightly, from:
el = angular.element('<div class="overlay-container"></div>');
iElement.wrap(el);
To:
iElement.wrap('<div class="overlay-container"></div>');
el = iElement.parent();
That said, I'm not sure why this behaviour was changed. Given that a angular.element was already created, it doesn't make much sense to me that another is being created.
Angular.js doesn't use semver. It means that your code can be broken by any update of angular. (I don't see the reason why angular team creates that dependency hell)
For each update of angular version you should check changelog and update your code for each breaking change.
You can't even rely on minor version number. There are breaking changes for patch updates in changelog.
If you update your application from 1.0 to 1.3 I advise you to start from changelog, as there can be bugs that isn't visible at first. Because there is huge number of breakings (159 for me using find in browser) and most of them was between v1.0 to v1.4.
Looking at Mastering Web Application Development in Angular, I tried to use the ng-if Directive to not show a <div> if an expression was false.
HTML
<div ng-controller="MyCtrl">
<div ng-if="showSecret">Secret</div>
</div>
JavaScript
var myModule = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.showSecret = (function() {
return false;
})();
}
But, looking at this JsFiddle(http://jsfiddle.net/64GCp/2/), I see that Secret gets rendered. Why?
It looks like you are using v1.0.1 and documentation here doesn't show an ngIf document.
The first instance of it I see is here in version 1.2.0
Changing the library version works: http://jsfiddle.net/64GCp/4/
The version of angular you are using does not support ng-if. Use a newer version. See my fiddlehttp://jsfiddle.net/SdYH5/
The options to hide and show are ng-show or ng-hide and later in version Angularjs 1.2.0+ ngIf
http://jsfiddle.net/64GCp/3/
All directives are executed over the DOM and therefore both ngShow or ngIf will be executed equally.
I have personally used ngShow in a page a large number of times(I decided to used "large number" to highlight the ambiguity) and tested it in all browsers including IE8 with no problems at all.
What the book is probably referring to is that the size of the page will not change because all ngShow/ngHide does is to hide the element:
ng-show output
<div ng-show="showSecret" style="display: none;">Secret</div>
While ngIf only leaves a comment:
ng-if output
<!-- ngIf: checked -->
Important: the first stable version to add ng-if was angular 1.2.0 make sure you have this version or higher before planning to use it.
Please understand 2 things, Angular is rapidly changing framework and so are the browsers it is always a good practice to search for benchmarks/versions to confirm or discard features. It is also possible that the internal functionality of directives may change overtime. For instance Angular Team announced that they dropped IE8 support in version 2.0.
I have a rather simple select box in angular JS. I am trying to add a class to toggle/hide the individual elements. I have tried in various ways and I am simply not getting something about angular js.
<select ng-class="{hide: user.student == false}" class="btn-blockAddress" ng-model="docs.address.type" ng-options="t for t in consts.data.typeOfAddress"></select>
<select ng-class="{hide: user.student != false}" class="btn-blockAddress" ng-model="docs.address.type" ng-options="t for t in consts.data.typeOfAddressForStudent"></select>
This is not working for me. It disables one, and not the other select, but then when I change user.student, I expect them to swap, but there is no change.
Should I be defining the behavior of the DOM form some other location? I understood the purpose of angular js was to watch variables for change. I have based my code on similar use in other parts of the codebase.
How do I inspect the value of user.student at the point it is evaluated to decide the class?
The javascriptish statements that go in directives are not really javascript - so what is it?
I have found the docs for angular js pretty good to show specific use cases, but I can not find clear API info that I can lookup.
There is a plugin for the dev tools called Batarang that is life saving. Check out this video for usage.