Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

docs(ngValue): add docs for ngValue directive #4267

Closed
wants to merge 1 commit into from
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 51 additions & 4 deletions src/ng/directive/input.js
Original file line number Diff line number Diff line change
Expand Up @@ -958,7 +958,7 @@ var VALID_CLASS = 'ng-valid',
</file>
* </example>
*
*
*
*/
var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$parse',
function($scope, $exceptionHandler, $attr, $element, $parse) {
Expand Down Expand Up @@ -1366,17 +1366,64 @@ var ngListDirective = function() {


var CONSTANT_VALUE_REGEXP = /^(true|false|\d+)$/;

/**
* @ngdoc directive
* @name ng.directive:ngValue
*
* @description
* Binds the given expression to the value of `input[select]` or `input[radio]`, so
* that when the element is selected, the `ngModel` of that element is set to the
* bound value.
*
* `ngValue` is useful for repeating over input elements, as shown below.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about?

ngValue is useful when dynamically generating lists of radio buttons using ng-repeat, as shown below.

*
* @element input
* @param {string=} ngValue angular expression to bind the value of the input to.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about?

Angular expression to bind to the value attribute of the input element

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or

angular expression, whose "value" will be bound to the value attribute of the input element

*
* @example
<doc:example>
<doc:source>
<script>
function Ctrl($scope) {
$scope.names = ['pizza', 'unicorns', 'robots'];
$scope.my = { favorite: 'unicorns' };
}
</script>
<form ng-controller="Ctrl">
<h2>Which is your favorite?</h2>
<label ng-repeat="name in names" for="{{name}}">
{{name}}
<input type="radio"
ng-model="my.favorite"
ng-value="name"
id="{{name}}"
name="favorite">
</label>
</span>
<div>You chose {{my.favorite}}</div>
</form>
</doc:source>
<doc:scenario>
it('should initialize to model', function() {
expect(binding('my.favorite')).toEqual('unicorns');
});
it('should bind the values to the inputs', function() {
input('my.favorite').select('pizza');
expect(binding('my.favorite')).toEqual('pizza');
});
</doc:scenario>
</doc:example>
*/
var ngValueDirective = function() {
return {
priority: 100,
compile: function(tpl, tplAttr) {
if (CONSTANT_VALUE_REGEXP.test(tplAttr.ngValue)) {
return function(scope, elm, attr) {
return function ngValueConstantLink(scope, elm, attr) {
attr.$set('value', scope.$eval(attr.ngValue));
};
} else {
return function(scope, elm, attr) {
return function ngValueLink(scope, elm, attr) {
scope.$watch(attr.ngValue, function valueWatchAction(value) {
attr.$set('value', value);
});
Expand Down