docs(input): document ngValue directive

Extend the example with ng-value showing how to deal with default checked radio boxes.

Closes #5654
This commit is contained in:
Abdessamad Idrissi 2014-01-07 00:47:41 +01:00 committed by Caitlin Potter
parent 7ba30fd2e7
commit 8dd4f14a04

View file

@ -309,6 +309,8 @@ var inputType = {
* @param {string=} name Property name of the form under which the control is published. * @param {string=} name Property name of the form under which the control is published.
* @param {string=} ngChange Angular expression to be executed when input changes due to user * @param {string=} ngChange Angular expression to be executed when input changes due to user
* interaction with the input element. * interaction with the input element.
* @param {string} ngValue Angular expression which sets the value to which the expression should
* be set when selected.
* *
* @example * @example
<doc:example> <doc:example>
@ -316,21 +318,26 @@ var inputType = {
<script> <script>
function Ctrl($scope) { function Ctrl($scope) {
$scope.color = 'blue'; $scope.color = 'blue';
$scope.specialValue = {
"id": "12345",
"value": "green"
};
} }
</script> </script>
<form name="myForm" ng-controller="Ctrl"> <form name="myForm" ng-controller="Ctrl">
<input type="radio" ng-model="color" value="red"> Red <br/> <input type="radio" ng-model="color" value="red"> Red <br/>
<input type="radio" ng-model="color" value="green"> Green <br/> <input type="radio" ng-model="color" ng-value="specialValue"> Green <br/>
<input type="radio" ng-model="color" value="blue"> Blue <br/> <input type="radio" ng-model="color" value="blue"> Blue <br/>
<tt>color = {{color}}</tt><br/> <tt>color = {{color | json}}</tt><br/>
</form> </form>
Note that `ng-value="specialValue"` sets radio item's value to be the value of `$scope.specialValue`.
</doc:source> </doc:source>
<doc:scenario> <doc:scenario>
it('should change state', function() { it('should change state', function() {
expect(binding('color')).toEqual('blue'); expect(binding('color')).toEqual('"blue"');
input('color').select('red'); input('color').select('red');
expect(binding('color')).toEqual('red'); expect(binding('color')).toEqual('"red"');
}); });
</doc:scenario> </doc:scenario>
</doc:example> </doc:example>