diff options
Diffstat (limited to 'js/vendor/angular/angular.js')
| -rw-r--r-- | js/vendor/angular/angular.js | 630 |
1 files changed, 414 insertions, 216 deletions
diff --git a/js/vendor/angular/angular.js b/js/vendor/angular/angular.js index a4d41b391..f39953895 100644 --- a/js/vendor/angular/angular.js +++ b/js/vendor/angular/angular.js @@ -1,5 +1,5 @@ /** - * @license AngularJS v1.4.0-rc.0 + * @license AngularJS v1.4.0-rc.1 * (c) 2010-2015 Google, Inc. http://angularjs.org * License: MIT */ @@ -57,7 +57,7 @@ function minErr(module, ErrorConstructor) { return match; }); - message += '\nhttp://errors.angularjs.org/1.4.0-rc.0/' + + message += '\nhttp://errors.angularjs.org/1.4.0-rc.1/' + (module ? module + '/' : '') + code; for (i = SKIP_INDEXES, paramPrefix = '?'; i < templateArgs.length; i++, paramPrefix = '&') { @@ -2286,11 +2286,11 @@ function toDebugString(obj) { * - `codeName` – `{string}` – Code name of the release, such as "jiggling-armfat". */ var version = { - full: '1.4.0-rc.0', // all of these placeholder strings will be replaced by grunt's + full: '1.4.0-rc.1', // all of these placeholder strings will be replaced by grunt's major: 1, // package task minor: 4, dot: 0, - codeName: 'smooth-unwinding' + codeName: 'sartorial-chronography' }; @@ -4746,6 +4746,7 @@ var $$CoreAnimateQueueProvider = function() { enabled: noop, on: noop, off: noop, + pin: noop, push: function(element, event, options, domOperation) { domOperation && domOperation(); @@ -4836,7 +4837,7 @@ var $$CoreAnimateQueueProvider = function() { var $AnimateProvider = ['$provide', function($provide) { var provider = this; - this.$$registeredAnimations = []; + this.$$registeredAnimations = Object.create(null); /** * @ngdoc method @@ -4944,12 +4945,120 @@ var $AnimateProvider = ['$provide', function($provide) { return { // we don't call it directly since non-existant arguments may // be interpreted as null within the sub enabled function + + /** + * + * @ngdoc method + * @name $animate#on + * @kind function + * @description Sets up an event listener to fire whenever the animation event (enter, leave, move, etc...) + * has fired on the given element or among any of its children. Once the listener is fired, the provided callback + * is fired with the following params: + * + * ```js + * $animate.on('enter', container, + * function callback(element, phase) { + * // cool we detected an enter animation within the container + * } + * ); + * ``` + * + * @param {string} event the animation event that will be captured (e.g. enter, leave, move, addClass, removeClass, etc...) + * @param {DOMElement} container the container element that will capture each of the animation events that are fired on itself + * as well as among its children + * @param {Function} callback the callback function that will be fired when the listener is triggered + * + * The arguments present in the callback function are: + * * `element` - The captured DOM element that the animation was fired on. + * * `phase` - The phase of the animation. The two possible phases are **start** (when the animation starts) and **close** (when it ends). + */ on: $$animateQueue.on, + + /** + * + * @ngdoc method + * @name $animate#off + * @kind function + * @description Deregisters an event listener based on the event which has been associated with the provided element. This method + * can be used in three different ways depending on the arguments: + * + * ```js + * // remove all the animation event listeners listening for `enter` + * $animate.off('enter'); + * + * // remove all the animation event listeners listening for `enter` on the given element and its children + * $animate.off('enter', container); + * + * // remove the event listener function provided by `listenerFn` that is set + * // to listen for `enter` on the given `element` as well as its children + * $animate.off('enter', container, callback); + * ``` + * + * @param {string} event the animation event (e.g. enter, leave, move, addClass, removeClass, etc...) + * @param {DOMElement=} container the container element the event listener was placed on + * @param {Function=} callback the callback function that was registered as the listener + */ off: $$animateQueue.off, + + /** + * @ngdoc method + * @name $animate#pin + * @kind function + * @description Associates the provided element with a host parent element to allow the element to be animated even if it exists + * outside of the DOM structure of the Angular application. By doing so, any animation triggered via `$animate` can be issued on the + * element despite being outside the realm of the application or within another application. Say for example if the application + * was bootstrapped on an element that is somewhere inside of the `<body>` tag, but we wanted to allow for an element to be situated + * as a direct child of `document.body`, then this can be achieved by pinning the element via `$animate.pin(element)`. Keep in mind + * that calling `$animate.pin(element, parentElement)` will not actually insert into the DOM anywhere; it will just create the association. + * + * Note that this feature is only active when the `ngAnimate` module is used. + * + * @param {DOMElement} element the external element that will be pinned + * @param {DOMElement} parentElement the host parent element that will be associated with the external element + */ + pin: $$animateQueue.pin, + + /** + * + * @ngdoc method + * @name $animate#enabled + * @kind function + * @description Used to get and set whether animations are enabled or not on the entire application or on an element and its children. This + * function can be called in four ways: + * + * ```js + * // returns true or false + * $animate.enabled(); + * + * // changes the enabled state for all animations + * $animate.enabled(false); + * $animate.enabled(true); + * + * // returns true or false if animations are enabled for an element + * $animate.enabled(element); + * + * // changes the enabled state for an element and its children + * $animate.enabled(element, true); + * $animate.enabled(element, false); + * ``` + * + * @param {DOMElement=} element the element that will be considered for checking/setting the enabled state + * @param {boolean=} enabled whether or not the animations will be enabled for the element + * + * @return {boolean} whether or not animations are enabled + */ enabled: $$animateQueue.enabled, + /** + * @ngdoc method + * @name $animate#cancel + * @kind function + * @description Cancels the provided animation. + * + * @param {Promise} animationPromise The animation promise that is returned when an animation is started. + */ cancel: function(runner) { - runner.cancel && runner.end(); + runner.end && runner.end(); }, /** @@ -6513,8 +6622,8 @@ function $TemplateCacheProvider() { }]); </script> <div ng-controller="GreeterController"> - <input ng-model="name"> <br> - <textarea ng-model="html"></textarea> <br> + <input ng-model="name"> <br/> + <textarea ng-model="html"></textarea> <br/> <div compile="html"></div> </div> </file> @@ -6551,7 +6660,7 @@ function $TemplateCacheProvider() { * * `cloneAttachFn` - If `cloneAttachFn` is provided, then the link function will clone the * `template` and call the `cloneAttachFn` function allowing the caller to attach the * cloned elements to the DOM document at the appropriate place. The `cloneAttachFn` is - * called as: <br> `cloneAttachFn(clonedElement, scope)` where: + * called as: <br/> `cloneAttachFn(clonedElement, scope)` where: * * * `clonedElement` - is a clone of the original `element` passed into the compiler. * * `scope` - is the current scope with which the linking function is working with. @@ -8930,7 +9039,7 @@ function $HttpParamSerializerJQLikeProvider() { * @name $httpParamSerializerJQLike * @description * - * Alternative $http params serializer that follows jQuerys `param()` method {http://api.jquery.com/jquery.param/} logic. + * Alternative $http params serializer that follows jQuery's [`param()`](http://api.jquery.com/jquery.param/) method logic. * */ this.$get = function() { return paramSerializerFactory(true); @@ -9083,8 +9192,8 @@ function $HttpProvider() { * * - **`defaults.paramSerializer`** - {string|function(Object<string,string>):string} - A function used to prepare string representation * of request parameters (specified as an object). - * Is specified as string, it is interpreted as function registered in with the {$injector}. - * Defaults to {$httpParamSerializer}. + * If specified as string, it is interpreted as a function registered with the {@link auto.$injector $injector}. + * Defaults to {@link ng.$httpParamSerializer $httpParamSerializer}. * **/ var defaults = this.defaults = { @@ -9615,11 +9724,11 @@ function $HttpProvider() { <example module="httpExample"> <file name="index.html"> <div ng-controller="FetchController"> - <select ng-model="method"> + <select ng-model="method" aria-label="Request method"> <option>GET</option> <option>JSONP</option> </select> - <input type="text" ng-model="url" size="80"/> + <input type="text" ng-model="url" size="80" aria-label="URL" /> <button id="fetchbtn" ng-click="fetch()">fetch</button><br> <button id="samplegetbtn" ng-click="updateModel('GET', 'http-hello.html')">Sample GET</button> <button id="samplejsonpbtn" @@ -10204,7 +10313,7 @@ function createHttpBackend($browser, createXhr, $browserDefer, callbacks, rawDoc } } - xhr.send(post || null); + xhr.send(post); } if (timeout > 0) { @@ -10735,7 +10844,7 @@ function $IntervalProvider() { * * <div> * <div ng-controller="ExampleController"> - * Date format: <input ng-model="format"> <hr/> + * <label>Date format: <input ng-model="format"></label> <hr/> * Current time is: <span my-current-time="format"></span> * <hr/> * Blood 1 : <font color='red'>{{blood_1}}</font> @@ -11880,8 +11989,8 @@ function $LocationProvider() { <file name="index.html"> <div ng-controller="LogController"> <p>Reload this page with open console, enter text and hit the log button...</p> - Message: - <input type="text" ng-model="message"/> + <label>Message: + <input type="text" ng-model="message" /></label> <button ng-click="$log.log(message)">log</button> <button ng-click="$log.warn(message)">warn</button> <button ng-click="$log.info(message)">info</button> @@ -16363,7 +16472,7 @@ function $SceDelegateProvider() { * Here's an example of a binding in a privileged context: * * ``` - * <input ng-model="userHtml"> + * <input ng-model="userHtml" aria-label="User input"> * <div ng-bind-html="userHtml"></div> * ``` * @@ -17489,7 +17598,7 @@ function urlIsSameOrigin(requestUrl) { }]); </script> <div ng-controller="ExampleController"> - <input type="text" ng-model="greeting" /> + <input type="text" ng-model="greeting" aria-label="greeting" /> <button ng-click="doGreeting(greeting)">ALERT</button> </div> </file> @@ -17790,7 +17899,7 @@ function $FilterProvider($provide) { {name:'Julie', phone:'555-8765'}, {name:'Juliette', phone:'555-5678'}]"></div> - Search: <input ng-model="searchText"> + <label>Search: <input ng-model="searchText"></label> <table id="searchTextResults"> <tr><th>Name</th><th>Phone</th></tr> <tr ng-repeat="friend in friends | filter:searchText"> @@ -17799,10 +17908,10 @@ function $FilterProvider($provide) { </tr> </table> <hr> - Any: <input ng-model="search.$"> <br> - Name only <input ng-model="search.name"><br> - Phone only <input ng-model="search.phone"><br> - Equality <input type="checkbox" ng-model="strict"><br> + <label>Any: <input ng-model="search.$"></label> <br> + <label>Name only <input ng-model="search.name"></label><br> + <label>Phone only <input ng-model="search.phone"></label><br> + <label>Equality <input type="checkbox" ng-model="strict"></label><br> <table id="searchObjResults"> <tr><th>Name</th><th>Phone</th></tr> <tr ng-repeat="friendObj in friends | filter:search:strict"> @@ -18005,7 +18114,7 @@ function getTypeForFilter(val) { }]); </script> <div ng-controller="ExampleController"> - <input type="number" ng-model="amount"> <br> + <input type="number" ng-model="amount" aria-label="amount"> <br> default currency symbol ($): <span id="currency-default">{{amount | currency}}</span><br> custom currency identifier (USD$): <span id="currency-custom">{{amount | currency:"USD$"}}</span> no fractions (0): <span id="currency-no-fractions">{{amount | currency:"USD$":0}}</span> @@ -18080,7 +18189,7 @@ function currencyFilter($locale) { }]); </script> <div ng-controller="ExampleController"> - Enter number: <input ng-model='val'><br> + <label>Enter number: <input ng-model='val'></label><br> Default formatting: <span id='number-default'>{{val | number}}</span><br> No fractions: <span>{{val | number:0}}</span><br> Negative number: <span>{{-val | number:4}}</span> @@ -18595,11 +18704,20 @@ var uppercaseFilter = valueFn(uppercase); }]); </script> <div ng-controller="ExampleController"> - Limit {{numbers}} to: <input type="number" step="1" ng-model="numLimit"> + <label> + Limit {{numbers}} to: + <input type="number" step="1" ng-model="numLimit"> + </label> <p>Output numbers: {{ numbers | limitTo:numLimit }}</p> - Limit {{letters}} to: <input type="number" step="1" ng-model="letterLimit"> + <label> + Limit {{letters}} to: + <input type="number" step="1" ng-model="letterLimit"> + </label> <p>Output letters: {{ letters | limitTo:letterLimit }}</p> - Limit {{longNumber}} to: <input type="number" step="1" ng-model="longNumberLimit"> + <label> + Limit {{longNumber}} to: + <input type="number" step="1" ng-model="longNumberLimit"> + </label> <p>Output long number: {{ longNumber | limitTo:longNumberLimit }}</p> </div> </file> @@ -19073,12 +19191,12 @@ var htmlAnchorDirective = valueFn({ * * The buggy way to write it: * ```html - * <img src="http://www.gravatar.com/avatar/{{hash}}"/> + * <img src="http://www.gravatar.com/avatar/{{hash}}" alt="Description"/> * ``` * * The correct way to write it: * ```html - * <img ng-src="http://www.gravatar.com/avatar/{{hash}}"/> + * <img ng-src="http://www.gravatar.com/avatar/{{hash}}" alt="Description" /> * ``` * * @element IMG @@ -19099,12 +19217,12 @@ var htmlAnchorDirective = valueFn({ * * The buggy way to write it: * ```html - * <img srcset="http://www.gravatar.com/avatar/{{hash}} 2x"/> + * <img srcset="http://www.gravatar.com/avatar/{{hash}} 2x" alt="Description"/> * ``` * * The correct way to write it: * ```html - * <img ng-srcset="http://www.gravatar.com/avatar/{{hash}} 2x"/> + * <img ng-srcset="http://www.gravatar.com/avatar/{{hash}} 2x" alt="Description" /> * ``` * * @element IMG @@ -19141,7 +19259,7 @@ var htmlAnchorDirective = valueFn({ * @example <example> <file name="index.html"> - Click me to toggle: <input type="checkbox" ng-model="checked"><br/> + <label>Click me to toggle: <input type="checkbox" ng-model="checked"></label><br/> <button ng-model="button" ng-disabled="checked">Button</button> </file> <file name="protractor.js" type="protractor"> @@ -19176,8 +19294,8 @@ var htmlAnchorDirective = valueFn({ * @example <example> <file name="index.html"> - Check me to check both: <input type="checkbox" ng-model="master"><br/> - <input id="checkSlave" type="checkbox" ng-checked="master"> + <label>Check me to check both: <input type="checkbox" ng-model="master"></label><br/> + <input id="checkSlave" type="checkbox" ng-checked="master" aria-label="Slave input"> </file> <file name="protractor.js" type="protractor"> it('should check both checkBoxes', function() { @@ -19211,8 +19329,8 @@ var htmlAnchorDirective = valueFn({ * @example <example> <file name="index.html"> - Check me to make text readonly: <input type="checkbox" ng-model="checked"><br/> - <input type="text" ng-readonly="checked" value="I'm Angular"/> + <label>Check me to make text readonly: <input type="checkbox" ng-model="checked"></label><br/> + <input type="text" ng-readonly="checked" value="I'm Angular" aria-label="Readonly field" /> </file> <file name="protractor.js" type="protractor"> it('should toggle readonly attr', function() { @@ -19247,8 +19365,8 @@ var htmlAnchorDirective = valueFn({ * @example <example> <file name="index.html"> - Check me to select: <input type="checkbox" ng-model="selected"><br/> - <select> + <label>Check me to select: <input type="checkbox" ng-model="selected"></label><br/> + <select aria-label="ngSelected demo"> <option>Hello!</option> <option id="greet" ng-selected="selected">Greetings!</option> </select> @@ -19284,7 +19402,7 @@ var htmlAnchorDirective = valueFn({ * @example <example> <file name="index.html"> - Check me check multiple: <input type="checkbox" ng-model="open"><br/> + <label>Check me check multiple: <input type="checkbox" ng-model="open"></label><br/> <details id="details" ng-open="open"> <summary>Show/Hide me</summary> </details> @@ -19987,13 +20105,16 @@ var inputType = { }]); </script> <form name="myForm" ng-controller="ExampleController"> - Single word: <input type="text" name="input" ng-model="example.text" - ng-pattern="example.word" required ng-trim="false"> - <span class="error" ng-show="myForm.input.$error.required"> - Required!</span> - <span class="error" ng-show="myForm.input.$error.pattern"> - Single word only!</span> - + <label>Single word: + <input type="text" name="input" ng-model="example.text" + ng-pattern="example.word" required ng-trim="false"> + </label> + <div role="alert"> + <span class="error" ng-show="myForm.input.$error.required"> + Required!</span> + <span class="error" ng-show="myForm.input.$error.pattern"> + Single word only!</span> + </div> <tt>text = {{example.text}}</tt><br/> <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/> <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/> @@ -20072,13 +20193,15 @@ var inputType = { }]); </script> <form name="myForm" ng-controller="DateController as dateCtrl"> - Pick a date in 2013: + <label for="exampleInput">Pick a date in 2013:</label> <input type="date" id="exampleInput" name="input" ng-model="example.value" placeholder="yyyy-MM-dd" min="2013-01-01" max="2013-12-31" required /> - <span class="error" ng-show="myForm.input.$error.required"> - Required!</span> - <span class="error" ng-show="myForm.input.$error.date"> - Not a valid date!</span> + <div role="alert"> + <span class="error" ng-show="myForm.input.$error.required"> + Required!</span> + <span class="error" ng-show="myForm.input.$error.date"> + Not a valid date!</span> + </div> <tt>value = {{example.value | date: "yyyy-MM-dd"}}</tt><br/> <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/> <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/> @@ -20165,13 +20288,15 @@ var inputType = { }]); </script> <form name="myForm" ng-controller="DateController as dateCtrl"> - Pick a date between in 2013: + <label for="exampleInput">Pick a date between in 2013:</label> <input type="datetime-local" id="exampleInput" name="input" ng-model="example.value" placeholder="yyyy-MM-ddTHH:mm:ss" min="2001-01-01T00:00:00" max="2013-12-31T00:00:00" required /> - <span class="error" ng-show="myForm.input.$error.required"> - Required!</span> - <span class="error" ng-show="myForm.input.$error.datetimelocal"> - Not a valid date!</span> + <div role="alert"> + <span class="error" ng-show="myForm.input.$error.required"> + Required!</span> + <span class="error" ng-show="myForm.input.$error.datetimelocal"> + Not a valid date!</span> + </div> <tt>value = {{example.value | date: "yyyy-MM-ddTHH:mm:ss"}}</tt><br/> <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/> <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/> @@ -20259,13 +20384,15 @@ var inputType = { }]); </script> <form name="myForm" ng-controller="DateController as dateCtrl"> - Pick a between 8am and 5pm: + <label for="exampleInput">Pick a between 8am and 5pm:</label> <input type="time" id="exampleInput" name="input" ng-model="example.value" placeholder="HH:mm:ss" min="08:00:00" max="17:00:00" required /> - <span class="error" ng-show="myForm.input.$error.required"> - Required!</span> - <span class="error" ng-show="myForm.input.$error.time"> - Not a valid date!</span> + <div role="alert"> + <span class="error" ng-show="myForm.input.$error.required"> + Required!</span> + <span class="error" ng-show="myForm.input.$error.time"> + Not a valid date!</span> + </div> <tt>value = {{example.value | date: "HH:mm:ss"}}</tt><br/> <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/> <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/> @@ -20352,13 +20479,17 @@ var inputType = { }]); </script> <form name="myForm" ng-controller="DateController as dateCtrl"> - Pick a date between in 2013: - <input id="exampleInput" type="week" name="input" ng-model="example.value" - placeholder="YYYY-W##" min="2012-W32" max="2013-W52" required /> - <span class="error" ng-show="myForm.input.$error.required"> - Required!</span> - <span class="error" ng-show="myForm.input.$error.week"> - Not a valid date!</span> + <label>Pick a date between in 2013: + <input id="exampleInput" type="week" name="input" ng-model="example.value" + placeholder="YYYY-W##" min="2012-W32" + max="2013-W52" required /> + </label> + <div role="alert"> + <span class="error" ng-show="myForm.input.$error.required"> + Required!</span> + <span class="error" ng-show="myForm.input.$error.week"> + Not a valid date!</span> + </div> <tt>value = {{example.value | date: "yyyy-Www"}}</tt><br/> <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/> <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/> @@ -20445,13 +20576,15 @@ var inputType = { }]); </script> <form name="myForm" ng-controller="DateController as dateCtrl"> - Pick a month in 2013: + <label for="exampleInput">Pick a month in 2013:</label> <input id="exampleInput" type="month" name="input" ng-model="example.value" placeholder="yyyy-MM" min="2013-01" max="2013-12" required /> - <span class="error" ng-show="myForm.input.$error.required"> - Required!</span> - <span class="error" ng-show="myForm.input.$error.month"> - Not a valid month!</span> + <div role="alert"> + <span class="error" ng-show="myForm.input.$error.required"> + Required!</span> + <span class="error" ng-show="myForm.input.$error.month"> + Not a valid month!</span> + </div> <tt>value = {{example.value | date: "yyyy-MM"}}</tt><br/> <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/> <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/> @@ -20548,12 +20681,16 @@ var inputType = { }]); </script> <form name="myForm" ng-controller="ExampleController"> - Number: <input type="number" name="input" ng-model="example.value" - min="0" max="99" required> - <span class="error" ng-show="myForm.input.$error.required"> - Required!</span> - <span class="error" ng-show="myForm.input.$error.number"> - Not valid number!</span> + <label>Number: + <input type="number" name="input" ng-model="example.value" + min="0" max="99" required> + </label> + <div role="alert"> + <span class="error" ng-show="myForm.input.$error.required"> + Required!</span> + <span class="error" ng-show="myForm.input.$error.number"> + Not valid number!</span> + </div> <tt>value = {{example.value}}</tt><br/> <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/> <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/> @@ -20638,11 +20775,15 @@ var inputType = { }]); </script> <form name="myForm" ng-controller="ExampleController"> - URL: <input type="url" name="input" ng-model="url.text" required> - <span class="error" ng-show="myForm.input.$error.required"> - Required!</span> - <span class="error" ng-show="myForm.input.$error.url"> - Not valid url!</span> + <label>URL: + <input type="url" name="input" ng-model="url.text" required> + <label> + <div role="alert"> + <span class="error" ng-show="myForm.input.$error.required"> + Required!</span> + <span class="error" ng-show="myForm.input.$error.url"> + Not valid url!</span> + </div> <tt>text = {{url.text}}</tt><br/> <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/> <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/> @@ -20729,11 +20870,15 @@ var inputType = { }]); </script> <form name="myForm" ng-controller="ExampleController"> - Email: <input type="email" name="input" ng-model="email.text" required> - <span class="error" ng-show="myForm.input.$error.required"> - Required!</span> - <span class="error" ng-show="myForm.input.$error.email"> - Not valid email!</span> + <label>Email: + <input type="email" name="input" ng-model="email.text" required> + </label> + <div role="alert"> + <span class="error" ng-show="myForm.input.$error.required"> + Required!</span> + <span class="error" ng-show="myForm.input.$error.email"> + Not valid email!</span> + </div> <tt>text = {{email.text}}</tt><br/> <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/> <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/> @@ -20802,9 +20947,18 @@ var inputType = { }]); </script> <form name="myForm" ng-controller="ExampleController"> - <input type="radio" ng-model="color.name" value="red"> Red <br/> - <input type="radio" ng-model="color.name" ng-value="specialValue"> Green <br/> - <input type="radio" ng-model="color.name" value="blue"> Blue <br/> + <label> + <input type="radio" ng-model="color.name" value="red"> + Red + </label><br/> + <label> + <input type="radio" ng-model="color.name" ng-value="specialValue"> + Green + </label><br/> + <label> + <input type="radio" ng-model="color.name" value="blue"> + Blue + </label><br/> <tt>color = {{color.name | json}}</tt><br/> </form> Note that `ng-value="specialValue"` sets radio item's value to be the value of `$scope.specialValue`. @@ -20852,9 +21006,13 @@ var inputType = { }]); </script> <form name="myForm" ng-controller="ExampleController"> - Value1: <input type="checkbox" ng-model="checkboxModel.value1"> <br/> - Value2: <input type="checkbox" ng-model="checkboxModel.value2" - ng-true-value="'YES'" ng-false-value="'NO'"> <br/> + <label>Value1: + <input type="checkbox" ng-model="checkboxModel.value1"> + </label><br/> + <label>Value2: + <input type="checkbox" ng-model="checkboxModel.value2" + ng-true-value="'YES'" ng-false-value="'NO'"> + </label><br/> <tt>value1 = {{checkboxModel.value1}}</tt><br/> <tt>value2 = {{checkboxModel.value2}}</tt><br/> </form> @@ -21371,26 +21529,36 @@ function checkboxInputType(scope, element, attr, ctrl, $sniffer, $browser, $filt </script> <div ng-controller="ExampleController"> <form name="myForm"> - User name: <input type="text" name="userName" ng-model="user.name" required> - <span class="error" ng-show="myForm.userName.$error.required"> - Required!</span><br> - Last name: <input type="text" name="lastName" ng-model="user.last" - ng-minlength="3" ng-maxlength="10"> - <span class="error" ng-show="myForm.lastName.$error.minlength"> - Too short!</span> - <span class="error" ng-show="myForm.lastName.$error.maxlength"> - Too long!</span><br> + <label> + User name: + <input type="text" name="userName" ng-model="user.name" required> + </label> + <div role="alert"> + <span class="error" ng-show="myForm.userName.$error.required"> + Required!</span> + </div> + <label> + Last name: + <input type="text" name="lastName" ng-model="user.last" + ng-minlength="3" ng-maxlength="10"> + </label> + <div role="alert"> + <span class="error" ng-show="myForm.lastName.$error.minlength"> + Too short!</span> + <span class="error" ng-show="myForm.lastName.$error.maxlength"> + Too long!</span> + </div> </form> <hr> <tt>user = {{user}}</tt><br/> - <tt>myForm.userName.$valid = {{myForm.userName.$valid}}</tt><br> - <tt>myForm.userName.$error = {{myForm.userName.$error}}</tt><br> - <tt>myForm.lastName.$valid = {{myForm.lastName.$valid}}</tt><br> - <tt>myForm.lastName.$error = {{myForm.lastName.$error}}</tt><br> - <tt>myForm.$valid = {{myForm.$valid}}</tt><br> - <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br> - <tt>myForm.$error.minlength = {{!!myForm.$error.minlength}}</tt><br> - <tt>myForm.$error.maxlength = {{!!myForm.$error.maxlength}}</tt><br> + <tt>myForm.userName.$valid = {{myForm.userName.$valid}}</tt><br/> + <tt>myForm.userName.$error = {{myForm.userName.$error}}</tt><br/> + <tt>myForm.lastName.$valid = {{myForm.lastName.$valid}}</tt><br/> + <tt>myForm.lastName.$error = {{myForm.lastName.$error}}</tt><br/> + <tt>myForm.$valid = {{myForm.$valid}}</tt><br/> + <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/> + <tt>myForm.$error.minlength = {{!!myForm.$error.minlength}}</tt><br/> + <tt>myForm.$error.maxlength = {{!!myForm.$error.maxlength}}</tt><br/> </div> </file> <file name="protractor.js" type="protractor"> @@ -21579,7 +21747,7 @@ var ngValueDirective = function() { }]); </script> <div ng-controller="ExampleController"> - Enter name: <input type="text" ng-model="name"><br> + <label>Enter name: <input type="text" ng-model="name"></label><br> Hello <span ng-bind="name"></span>! </div> </file> @@ -21640,8 +21808,8 @@ var ngBindDirective = ['$compile', function($compile) { }]); </script> <div ng-controller="ExampleController"> - Salutation: <input type="text" ng-model="salutation"><br> - Name: <input type="text" ng-model="name"><br> + <label>Salutation: <input type="text" ng-model="salutation"></label><br> + <label>Name: <input type="text" ng-model="name"></label><br> <pre ng-bind-template="{{salutation}} {{name}}!"></pre> </div> </file> @@ -21988,21 +22156,34 @@ function classDirective(name, selector) { <example> <file name="index.html"> <p ng-class="{strike: deleted, bold: important, red: error}">Map Syntax Example</p> - <input type="checkbox" ng-model="deleted"> deleted (apply "strike" class)<br> - <input type="checkbox" ng-model="important"> important (apply "bold" class)<br> - <input type="checkbox" ng-model="error"> error (apply "red" class) + <label> + <input type="checkbox" ng-model="deleted"> + deleted (apply "strike" class) + </label><br> + <label> + <input type="checkbox" ng-model="important"> + important (apply "bold" class) + </label><br> + <label> + <input type="checkbox" ng-model="error"> + error (apply "red" class) + </label> <hr> <p ng-class="style">Using String Syntax</p> - <input type="text" ng-model="style" placeholder="Type: bold strike red"> + <input type="text" ng-model="style" + placeholder="Type: bold strike red" aria-label="Type: bold strike red"> <hr> <p ng-class="[style1, style2, style3]">Using Array Syntax</p> - <input ng-model="style1" placeholder="Type: bold, strike or red"><br> - <input ng-model="style2" placeholder="Type: bold, strike or red"><br> - <input ng-model="style3" placeholder="Type: bold, strike or red"><br> + <input ng-model="style1" + placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red"><br> + <input ng-model="style2" + placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red 2"><br> + <input ng-model="style3" + placeholder="Type: bold, strike or red |