ngInflection
Angular filters for inflection. You can combine the filters to get some pretty cool results with English-language words.
You can see it in action, here.
installation
You can use this library with requirejs, browserify, bower, or plain browser-globals.
browserify
npm install --save nginflection
In your app-code:
var angular = require('angular');
var inflection = require('inflection');
require('nginflection');bower
bower install --save ngInflection
browser-globals
Here is how to use it with CDNs & no module-management:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="https://cdn.rawgit.com/dreamerslab/node.inflection/master/inflection.min.js"></script>
<script src="http://konsumer.github.io/ngInflection/dist/ngInflection.min.js"></script>requirejs
Download into your requirejs path, then do this:
define(['angular', 'inflection', 'ngInflection'], function(angular, inflection){
// do stuff here
});usage
Once you have the code loaded, add it to your app, along with your other Angular dependencies:
var app = angular.module('app', [
'ngRoute',
'ngInflection'
]);Use it in your templates, like this:
{{ myThing | pluralize | titleize }}You can see more examples in index.html.
ngPluralize
ngPluralize is useful for outputting numeric amounts of things. If the name of the thing is unknown, and could be plural or singular, and the amount is unknown, you can use ngInflection with ngPluralize to work out the permutations of the string. Here is a cool example:
<ng-pluralize count="fruitCount" when="{
'0': 'No {{fruitType | pluralize | titleize}}',
'1': 'One {{fruitType | singularize | titleize}}',
'other': '{} {{fruitType | pluralize | titleize}}'}"></ng-pluralize>- If fruitCount=0 & fruitType='apple', you get 'No Apples'
- If fruitCount=1 & fruitType='apple', you get 'One Apple'
- If fruitCount=2 & fruitType='apple', you get '2 Apples'
- If fruitCount=200 & fruitType='oranges', you get '200 Oranges'
- If fruitCount=1 & fruitType='oranges', you get 'One Orange'
- If fruitCount=1 & fruitType='Beautiful pears', you get 'One Beautiful Pear'
- If fruitCount=10 & fruitType='beautiful pear', you get '10 Beautiful Pears'
api
Here are all the filters available:
pluralize
Output a plural of a string. Use it like this:
{{ 'person' | pluralize }} outputs people.Sometimes, you might want to use a special word when a singular is detected:
{{ 'person' | pluralize:'best buds' }} outputs best buds.singularize
Output a singlular of a string. Use it like this:
{{ 'people' | singularize }} outputs person.Sometimes, you might want to use a special word when a plural is detected:
{{ 'people' | singularize:'best bud' }} outputs best bud.inflect
Output a singular or plural of a string based on a number. Use it like this:
{{ 'person' | inflect:0 }} outputs people.{{ 'people' | inflect:1 }} outputs person.{{ 'person' | inflect:2 }} outputs people.You can also pass in special words for both singular and plural:
{{ 'people' | inflect:1:'best bud':'bestest buds' }} outputs best bud.{{ 'people' | inflect:2:'best bud':'bestest buds' }} outputs bestest buds.camelize
Output a camelize of a string. Use it like this:
{{ 'Some cool stuff' | camelize }} outputs SomeCoolStuff.You can also get the first letter lower-case, like this:
{{ 'Some cool stuff' | camelize:true }} outputs someCoolStuff.underscore
Output an underscored version of a string. Use it like this:
{{ 'SomeCoolStuff' | underscore }} outputs some_cool_stuff.humanize
Output a humanized version of a string. Use it like this:
{{ 'some_cool_stuff' | humanize }} outputs Some cool stuff.You might also want it not capitalized:
{{ 'some_cool_stuff' | humanize:true }} outputs some cool stuff.capitalize
Output a first-letter-capitalized version of a string. Use it like this:
{{ 'some_cool_stuff' | capitalize }} outputs Some_cool_stuff.dasherize
Output a dasherized version of a string. Use it like this:
{{ 'some_cool_stuff' | dasherize }} outputs some-cool-stuff.titleize
Output a titleized version of a string. Use it like this:
{{ 'some_cool_stuff' | titleize }} outputs Some Cool Stuff.demodulize
Output a demodulized version of a string. Use it like this:
{{ 'Cool::Stuff' | demodulize }} outputs Stuff.tableize
Output a tableized version of a string. Use it like this:
{{ 'CoolThing' | tableize }} outputs cool_things.classify
Output a classy version of a string. Use it like this:
{{ 'cool_things' | classify }} outputs CoolThing.foreign_key
Output a foreign_key version of a string. Use it like this:
{{ 'cool_thing' | foreign_key }} outputs cool_thing_id.You might want to join id to the string. Do that like this:
{{ 'cool_thing' | foreign_key:true }} outputs cool_thingid.ordinalize
Output an ordinalized version of a string. Use it like this:
{{ 'the 1 pitch' | ordinalize }} outputs the 1st pitch.possibly less-useful, but also included
I didn't include usage notes on these, because I couldn't think of good use-cases, but check out the original documentation, if these seem like something you want.
indexOf
This lets us detect if an Array contains a given element. This did not seem super-useful in the context of an angular string filter, but you could probably use it in some clever way with an array of objects.
transform
This will execute an array of transforms. Since you can pipe filters in angular templates, this is best used from the filter service, not in actual templates. It works like this:
filter('manipulateThingFromApi', function($filter) {
return function(apiThing) {
//manipulate api things
return $filter('transform')(apiThing, ['pluralize', 'titleize']);
}
}To do the same things in a template, use Angular's pipe syntax, like so:
{{ 'cool thing' | pluralize | titleize }} outputs Cool Things
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent