Unified
Split
Showing
with
33 additions
and 9 deletions.
- +10 −5 docs/content/guide/filter.ngdoc
- +3 −3 docs/content/guide/interpolation.ngdoc
- +1 −1 docs/content/tutorial/step_06.ngdoc
- +19 −0 test/ng/directive/inputSpec.js
| @@ -32,10 +32,13 @@ E.g. the markup `{{ 1234 | number:2 }}` formats the number 1234 with 2 decimal p | ||
|
|
||
| ## Using filters in controllers, services, and directives | ||
|
|
||
| You can also use filters in controllers, services, and directives. For this, inject a dependency | ||
| with the name `<filterName>Filter` to your controller/service/directive. E.g. using the dependency | ||
| `numberFilter` will inject the number filter. The injected argument is a function that takes the | ||
| value to format as first argument and filter parameters starting with the second argument. | ||
| You can also use filters in controllers, services, and directives. | ||
|
|
||
| <div class="alert alert-info"> | ||
| For this, inject a dependency with the name `<filterName>Filter` into your controller/service/directive. | ||
| E.g. a filter called `number` is injected by using the dependency `numberFilter`. The injected argument | ||
| is a function that takes the value to format as first argument, and filter parameters starting with the second argument. | ||
| </div> | ||
|
|
||
| The example below uses the filter called {@link ng.filter:filter `filter`}. | ||
| This filter reduces arrays into sub arrays based on | ||
| @@ -108,6 +111,7 @@ text upper-case. | ||
| No filter: {{greeting}}<br> | ||
| Reverse: {{greeting|reverse}}<br> | ||
| Reverse + uppercase: {{greeting|reverse:true}}<br> | ||
| Reverse, filtered in controller: {{filteredGreeting}}<br> | ||
| </div> | ||
| </file> | ||
|
|
||
| @@ -127,8 +131,9 @@ text upper-case. | ||
| return out; | ||
| }; | ||
| }) | ||
| .controller('MyController', ['$scope', function($scope) { | ||
| .controller('MyController', ['$scope', 'reverseFilter', function($scope, reverseFilter) { | ||
| $scope.greeting = 'hello'; | ||
| $scope.filteredGreeting = reverseFilter($scope.greeting); | ||
| }]); | ||
| </file> | ||
| </example> | ||
| @@ -5,7 +5,7 @@ | ||
|
|
||
| # Interpolation and data-binding | ||
|
|
||
| Interpolation markup with embedded @link {guide/expressions expressions} is used by Angular to | ||
| Interpolation markup with embedded {@link guide/expressions expressions} is used by Angular to | ||
| provide data-binding to text nodes and attribute values. | ||
|
|
||
| An example of interpolation is shown below: | ||
| @@ -43,8 +43,8 @@ interpret the attribute as present, meaning that the button would always be disa | ||
| ``` | ||
|
|
||
| For this reason, Angular provides special `ng`-prefixed directives for the following boolean attributes: | ||
| {@link ngDisabled `disabled`}, [@link ngRequired `required`}, [@link ngSelected `selected`}, | ||
| {@link ngChecked `checked`}, {@link ngReadonly `readOnly`} , and [@link ngOpen `open`}. | ||
| {@link ngDisabled `disabled`}, {@link ngRequired `required`}, {@link ngSelected `selected`}, | ||
| {@link ngChecked `checked`}, {@link ngReadonly `readOnly`} , and {@link ngOpen `open`}. | ||
|
|
||
| These directives take an expression inside the attribute, and set the corresponding boolean attribute | ||
| to true when the expression evaluates to truthy. | ||
| @@ -43,7 +43,7 @@ __`app/index.html`:__ | ||
| ... | ||
| <ul class="phones"> | ||
| <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail"> | ||
| <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a> | ||
| <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}" alt="{{phone.name}}"></a> | ||
| <a href="#/phones/{{phone.id}}">{{phone.name}}</a> | ||
| <p>{{phone.snippet}}</p> | ||
| </li> | ||
| @@ -72,6 +72,25 @@ describe('input', function() { | ||
| expect($rootScope.form.$$renameControl).not.toHaveBeenCalled(); | ||
| }); | ||
|
|
||
|
|
||
| it('should not set the `val` property when the value is equal to the current value', inject(function($rootScope, $compile) { | ||
| // This is a workaround for Firefox validation. Look at #12102. | ||
| var input = jqLite('<input type="text" ng-model="foo" required/>'); | ||
| var setterCalls = 0; | ||
| $rootScope.foo = ''; | ||
| Object.defineProperty(input[0], 'value', { | ||
| get: function() { | ||
| return ''; | ||
| }, | ||
| set: function() { | ||
| setterCalls++; | ||
| } | ||
| }); | ||
| $compile(input)($rootScope); | ||
| $rootScope.$digest(); | ||
| expect(setterCalls).toBe(0); | ||
| })); | ||
|
|
||
| describe('compositionevents', function() { | ||
| it('should not update the model between "compositionstart" and "compositionend" on non android', function() { | ||
|
|
||