How can I access and test an AngularJS filter from the browser console?

ryanm

Given a test filter, say this 'capitalize' filter that will capitalize the first letter of each word:

return function (input) {
  return (!!input) ? input.replace(/([^\W_]+[^\s-]*) */g, function (txt) {
    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
  }) : '';
}

How can this filter be tested from a browser's JavaScript console?

ryanm

Filters can be called in HTML template binding {{myString | capitalize}}, but to gain access to it in the browser we have an excellent option. Consider this:

$filter('filter')(array, expression, comparator) per Angular $filter documentation

Realizing a filter can be called via the$filter service, you can thus access, call and test the capitalize filter this way:

angular.element(document.body).injector().get('$filter')('capitalize')('capitalization test')

The result in the console? "Capitalization Test"

What about a filter with more than one input? Just add the parameter, for instance if the capitalize filter had a second boolean parameter to restrict capitalization to the first word only:

angular.element(document.body).injector().get('$filter')('capitalize')('capitalization test', true)

OR

angular.element(document.body).injector().get('$filter')('capitalize').apply(null, ['capitalization test', true])

Kudos to this SO article and related blog entries for posting on accessing services from the console: access service from console.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How can I filter out errors from the Firefox Browser Console?

From Java

How can I test an AngularJS service from the console?

From Dev

How can I test this angularjs filter?

From Dev

How can I dynamically connect LightTable to an external browser from console?

From Java

Typescript: How to access function from browser console

From Dev

How to access RequireJS modules from browser console?

From Dev

How to access the component controller from browser console?

From Java

How do I access the $scope variable in browser's console using AngularJS?

From Dev

How can I access UserManager and RoleManager from a Console App?

From Dev

How can I access my angular resource from the developer console?

From Dev

What would prevent access to AngularJS $scope from browser console?

From Java

While debugging, can I have access to the Redux store from the browser console?

From Dev

How can I use an AngularJS filter to select rows from a range?

From Dev

How can I access a data file from a Unit test method?

From Dev

How can I access $stateParams from a service in AngularJS?

From Dev

How can i access my filtered array from controller in angularjs?

From Dev

Meteor - how can I examine a particular Template's data context from the browser JavaScript console?

From Dev

How can I call methods on Reactjs components in the browser console or from an outside script?

From Dev

How can I register a filter in AngularJS?

From Dev

How can I access files from a Google Cloud Storage bucket from a browser?

From Dev

How can'I test angularJs event '$on'?

From Dev

How can I submit a form with input values in Chrome browser console?

From Dev

How can I submit a form with input values in Chrome browser console?

From Dev

How can i capture Browser console log using selenium and java

From Dev

How can i run my own console in Browser?

From Dev

How can I get the name of the alternative in an active Google Optimize test from the console?

From Dev

Using Vagrant, how can I access an apache virtual host from the host OS's web browser

From Dev

How can I access Dart functions/variables from the Dartium DevTool Console?

From Dev

Debugging in Electron: how can I access render-scope objects from the console?

Related Related

  1. 1

    How can I filter out errors from the Firefox Browser Console?

  2. 2

    How can I test an AngularJS service from the console?

  3. 3

    How can I test this angularjs filter?

  4. 4

    How can I dynamically connect LightTable to an external browser from console?

  5. 5

    Typescript: How to access function from browser console

  6. 6

    How to access RequireJS modules from browser console?

  7. 7

    How to access the component controller from browser console?

  8. 8

    How do I access the $scope variable in browser's console using AngularJS?

  9. 9

    How can I access UserManager and RoleManager from a Console App?

  10. 10

    How can I access my angular resource from the developer console?

  11. 11

    What would prevent access to AngularJS $scope from browser console?

  12. 12

    While debugging, can I have access to the Redux store from the browser console?

  13. 13

    How can I use an AngularJS filter to select rows from a range?

  14. 14

    How can I access a data file from a Unit test method?

  15. 15

    How can I access $stateParams from a service in AngularJS?

  16. 16

    How can i access my filtered array from controller in angularjs?

  17. 17

    Meteor - how can I examine a particular Template's data context from the browser JavaScript console?

  18. 18

    How can I call methods on Reactjs components in the browser console or from an outside script?

  19. 19

    How can I register a filter in AngularJS?

  20. 20

    How can I access files from a Google Cloud Storage bucket from a browser?

  21. 21

    How can'I test angularJs event '$on'?

  22. 22

    How can I submit a form with input values in Chrome browser console?

  23. 23

    How can I submit a form with input values in Chrome browser console?

  24. 24

    How can i capture Browser console log using selenium and java

  25. 25

    How can i run my own console in Browser?

  26. 26

    How can I get the name of the alternative in an active Google Optimize test from the console?

  27. 27

    Using Vagrant, how can I access an apache virtual host from the host OS's web browser

  28. 28

    How can I access Dart functions/variables from the Dartium DevTool Console?

  29. 29

    Debugging in Electron: how can I access render-scope objects from the console?

HotTag

Archive