- Hide:
-
- I hide when your checkbox is checked.
-
+ Show:
+
+ I show up when your checkbox is checked.
-
- @import url(../../components/bootstrap-3.1.1/css/bootstrap.css);
-
- .animate-show {
- line-height: 20px;
+ .animate-show-hide.ng-hide {
+ opacity: 0;
+ }
+
+ .animate-show-hide.ng-hide-add,
+ .animate-show-hide.ng-hide-remove {
+ transition: all linear 0.5s;
+ }
+
+ .check-element {
+ border: 1px solid black;
opacity: 1;
padding: 10px;
- border: 1px solid black;
- background: white;
}
+
+
+ it('should check ngShow', function() {
+ var checkbox = element(by.model('checked'));
+ var checkElem = element(by.css('.check-element'));
- .animate-show.ng-hide-add, .animate-show.ng-hide-remove {
- transition: all linear 0.5s;
+ expect(checkElem.isDisplayed()).toBe(false);
+ checkbox.click();
+ expect(checkElem.isDisplayed()).toBe(true);
+ });
+
+
+ *
+ *
+ * @example
+ * A more complex example, featuring different show/hide animations:
+ *
+
+
+ Show:
+
+ I show up when your checkbox is checked.
+
+
+
+ body {
+ overflow: hidden;
+ perspective: 1000px;
}
- .animate-show.ng-hide {
- line-height: 0;
- opacity: 0;
- padding: 0 10px;
+ .funky-show-hide.ng-hide-add {
+ transform: rotateZ(0);
+ transform-origin: right;
+ transition: all 0.5s ease-in-out;
+ }
+
+ .funky-show-hide.ng-hide-add.ng-hide-add-active {
+ transform: rotateZ(-135deg);
+ }
+
+ .funky-show-hide.ng-hide-remove {
+ transform: rotateY(90deg);
+ transform-origin: left;
+ transition: all 0.5s ease;
+ }
+
+ .funky-show-hide.ng-hide-remove.ng-hide-remove-active {
+ transform: rotateY(0);
}
.check-element {
- padding: 10px;
border: 1px solid black;
- background: white;
+ opacity: 1;
+ padding: 10px;
}
- var thumbsUp = element(by.css('span.glyphicon-thumbs-up'));
- var thumbsDown = element(by.css('span.glyphicon-thumbs-down'));
+ it('should check ngShow', function() {
+ var checkbox = element(by.model('checked'));
+ var checkElem = element(by.css('.check-element'));
- it('should check ng-show / ng-hide', function() {
- expect(thumbsUp.isDisplayed()).toBeFalsy();
- expect(thumbsDown.isDisplayed()).toBeTruthy();
-
- element(by.model('checked')).click();
-
- expect(thumbsUp.isDisplayed()).toBeTruthy();
- expect(thumbsDown.isDisplayed()).toBeFalsy();
+ expect(checkElem.isDisplayed()).toBe(false);
+ checkbox.click();
+ expect(checkElem.isDisplayed()).toBe(true);
});
@@ -40874,11 +41926,13 @@ var ngShowDirective = ['$animate', function($animate) {
* @multiElement
*
* @description
- * The `ngHide` directive shows or hides the given HTML element based on the expression
- * provided to the `ngHide` attribute. The element is shown or hidden by removing or adding
- * the `ng-hide` CSS class onto the element. The `.ng-hide` CSS class is predefined
- * in AngularJS and sets the display style to none (using an !important flag).
- * For CSP mode please add `angular-csp.css` to your html file (see {@link ng.directive:ngCsp ngCsp}).
+ * The `ngHide` directive shows or hides the given HTML element based on the expression provided to
+ * the `ngHide` attribute.
+ *
+ * The element is shown or hidden by removing or adding the `.ng-hide` CSS class onto the element.
+ * The `.ng-hide` CSS class is predefined in AngularJS and sets the display style to none (using an
+ * `!important` flag). For CSP mode please add `angular-csp.css` to your HTML file (see
+ * {@link ng.directive:ngCsp ngCsp}).
*
* ```html
*
@@ -40888,30 +41942,32 @@ var ngShowDirective = ['$animate', function($animate) {
*
* ```
*
- * When the `ngHide` expression evaluates to a truthy value then the `.ng-hide` CSS class is added to the class
- * attribute on the element causing it to become hidden. When falsy, the `.ng-hide` CSS class is removed
- * from the element causing the element not to appear hidden.
+ * When the `ngHide` expression evaluates to a truthy value then the `.ng-hide` CSS class is added
+ * to the class attribute on the element causing it to become hidden. When falsy, the `.ng-hide`
+ * CSS class is removed from the element causing the element not to appear hidden.
*
- * ## Why is !important used?
+ * ## Why is `!important` used?
*
- * You may be wondering why !important is used for the `.ng-hide` CSS class. This is because the `.ng-hide` selector
- * can be easily overridden by heavier selectors. For example, something as simple
- * as changing the display style on a HTML list item would make hidden elements appear visible.
- * This also becomes a bigger issue when dealing with CSS frameworks.
+ * You may be wondering why `!important` is used for the `.ng-hide` CSS class. This is because the
+ * `.ng-hide` selector can be easily overridden by heavier selectors. For example, something as
+ * simple as changing the display style on a HTML list item would make hidden elements appear
+ * visible. This also becomes a bigger issue when dealing with CSS frameworks.
*
- * By using !important, the show and hide behavior will work as expected despite any clash between CSS selector
- * specificity (when !important isn't used with any conflicting styles). If a developer chooses to override the
- * styling to change how to hide an element then it is just a matter of using !important in their own CSS code.
+ * By using `!important`, the show and hide behavior will work as expected despite any clash between
+ * CSS selector specificity (when `!important` isn't used with any conflicting styles). If a
+ * developer chooses to override the styling to change how to hide an element then it is just a
+ * matter of using `!important` in their own CSS code.
*
* ### Overriding `.ng-hide`
*
- * By default, the `.ng-hide` class will style the element with `display: none!important`. If you wish to change
- * the hide behavior with ngShow/ngHide then this can be achieved by restating the styles for the `.ng-hide`
- * class in CSS:
+ * By default, the `.ng-hide` class will style the element with `display: none !important`. If you
+ * wish to change the hide behavior with `ngShow`/`ngHide`, you can simply overwrite the styles for
+ * the `.ng-hide` CSS class. Note that the selector that needs to be used is actually
+ * `.ng-hide:not(.ng-hide-animate)` to cope with extra animation classes that can be added.
*
* ```css
- * .ng-hide {
- * /* this is just another form of hiding an element */
+ * .ng-hide:not(.ng-hide-animate) {
+ * /* These are just alternative ways of hiding an element */
* display: block!important;
* position: absolute;
* top: -9999px;
@@ -40919,20 +41975,20 @@ var ngShowDirective = ['$animate', function($animate) {
* }
* ```
*
- * By default you don't need to override in CSS anything and the animations will work around the display style.
+ * By default you don't need to override in CSS anything and the animations will work around the
+ * display style.
*
* ## A note about animations with `ngHide`
*
- * Animations in ngShow/ngHide work with the show and hide events that are triggered when the directive expression
- * is true and false. This system works like the animation system present with ngClass, except that the `.ng-hide`
- * CSS class is added and removed for you instead of your own CSS class.
+ * Animations in `ngShow`/`ngHide` work with the show and hide events that are triggered when the
+ * directive expression is true and false. This system works like the animation system present with
+ * `ngClass` except that you must also include the `!important` flag to override the display
+ * property so that the elements are not actually hidden during the animation.
*
* ```css
- * //
- * //a working example can be found at the bottom of this page
- * //
+ * /* A working example can be found at the bottom of this page. */
* .my-element.ng-hide-add, .my-element.ng-hide-remove {
- * transition: 0.5s linear all;
+ * transition: all 0.5s linear;
* }
*
* .my-element.ng-hide-add { ... }
@@ -40941,74 +41997,109 @@ var ngShowDirective = ['$animate', function($animate) {
* .my-element.ng-hide-remove.ng-hide-remove-active { ... }
* ```
*
- * Keep in mind that, as of AngularJS version 1.3, there is no need to change the display
- * property to block during animation states--ngAnimate will handle the style toggling automatically for you.
+ * Keep in mind that, as of AngularJS version 1.3, there is no need to change the display property
+ * to block during animation states - ngAnimate will automatically handle the style toggling for you.
*
* @animations
- * | Animation | Occurs |
- * |----------------------------------|-------------------------------------|
- * | {@link $animate#addClass addClass} `.ng-hide` | after the `ngHide` expression evaluates to a truthy value and just before the contents are set to hidden |
- * | {@link $animate#removeClass removeClass} `.ng-hide` | after the `ngHide` expression evaluates to a non truthy value and just before contents are set to visible |
+ * | Animation | Occurs |
+ * |-----------------------------------------------------|------------------------------------------------------------------------------------------------------------|
+ * | {@link $animate#addClass addClass} `.ng-hide` | After the `ngHide` expression evaluates to a truthy value and just before the contents are set to hidden. |
+ * | {@link $animate#removeClass removeClass} `.ng-hide` | After the `ngHide` expression evaluates to a non truthy value and just before contents are set to visible. |
*
*
* @element ANY
- * @param {expression} ngHide If the {@link guide/expression expression} is truthy then
- * the element is shown or hidden respectively.
+ * @param {expression} ngHide If the {@link guide/expression expression} is truthy/falsy then the
+ * element is hidden/shown respectively.
*
* @example
-
+ * A simple example, animating the element's opacity:
+ *
+
- Click me:
-
- Show:
-
- I show up when your checkbox is checked.
-
-
-
- Hide:
-
- I hide when your checkbox is checked.
-
+ Hide:
+
+ I hide when your checkbox is checked.
-
- @import url(../../components/bootstrap-3.1.1/css/bootstrap.css);
-
- .animate-hide {
+ .animate-show-hide.ng-hide {
+ opacity: 0;
+ }
+
+ .animate-show-hide.ng-hide-add,
+ .animate-show-hide.ng-hide-remove {
transition: all linear 0.5s;
- line-height: 20px;
+ }
+
+ .check-element {
+ border: 1px solid black;
opacity: 1;
padding: 10px;
- border: 1px solid black;
- background: white;
}
+
+
+ it('should check ngHide', function() {
+ var checkbox = element(by.model('checked'));
+ var checkElem = element(by.css('.check-element'));
- .animate-hide.ng-hide {
- line-height: 0;
- opacity: 0;
- padding: 0 10px;
+ expect(checkElem.isDisplayed()).toBe(true);
+ checkbox.click();
+ expect(checkElem.isDisplayed()).toBe(false);
+ });
+
+
+ *
+ *
+ * @example
+ * A more complex example, featuring different show/hide animations:
+ *
+
+
+ Hide:
+
+ I hide when your checkbox is checked.
+
+
+
+ body {
+ overflow: hidden;
+ perspective: 1000px;
+ }
+
+ .funky-show-hide.ng-hide-add {
+ transform: rotateZ(0);
+ transform-origin: right;
+ transition: all 0.5s ease-in-out;
+ }
+
+ .funky-show-hide.ng-hide-add.ng-hide-add-active {
+ transform: rotateZ(-135deg);
+ }
+
+ .funky-show-hide.ng-hide-remove {
+ transform: rotateY(90deg);
+ transform-origin: left;
+ transition: all 0.5s ease;
+ }
+
+ .funky-show-hide.ng-hide-remove.ng-hide-remove-active {
+ transform: rotateY(0);
}
.check-element {
- padding: 10px;
border: 1px solid black;
- background: white;
+ opacity: 1;
+ padding: 10px;
}
- var thumbsUp = element(by.css('span.glyphicon-thumbs-up'));
- var thumbsDown = element(by.css('span.glyphicon-thumbs-down'));
-
- it('should check ng-show / ng-hide', function() {
- expect(thumbsUp.isDisplayed()).toBeFalsy();
- expect(thumbsDown.isDisplayed()).toBeTruthy();
+ it('should check ngHide', function() {
+ var checkbox = element(by.model('checked'));
+ var checkElem = element(by.css('.check-element'));
- element(by.model('checked')).click();
-
- expect(thumbsUp.isDisplayed()).toBeTruthy();
- expect(thumbsDown.isDisplayed()).toBeFalsy();
+ expect(checkElem.isDisplayed()).toBe(true);
+ checkbox.click();
+ expect(checkElem.isDisplayed()).toBe(false);
});
@@ -41591,19 +42682,141 @@ var scriptDirective = ['$templateCache', function($templateCache) {
var noopNgModelController = { $setViewValue: noop, $render: noop };
+function setOptionSelectedStatus(optionEl, value) {
+ optionEl.prop('selected', value);
+ /**
+ * When unselecting an option, setting the property to null / false should be enough
+ * However, screenreaders might react to the selected attribute instead, see
+ * https://github.com/angular/angular.js/issues/14419
+ * Note: "selected" is a boolean attr and will be removed when the "value" arg in attr() is false
+ * or null
+ */
+ optionEl.attr('selected', value);
+}
+
/**
* @ngdoc type
* @name select.SelectController
+ *
* @description
- * The controller for the `