Use the pipe character in an Angular Filter expression

Question

i would like to use the '|' character in an Angular 1 Filter expression lie

{{ ctrl.items | map: 'name|id' | join: ',' }}

Is there some kind of character escaping i could use? I know that the | character is used for calling a Filter, but i would like to use it to concat the two properties 'name' and 'id'.

And yes, i know that i could write a function in the controller to concatenate the two properties but i'm interested if there is a way to do this in the expression.

PS: The filter map and join are from this repo: https://github.com/a8m/angular-filter

Update:

In the controller:

ctrl.items = [{ name: 'ape', id:1 }, { name: 'john', id:2 }];

In the template:

<input type='hidden' value="{{ ctrl.items | map: 'name|id' | join: ',' }}" >

expected output:

<input type='hidden' value="ape|1,john|2" >

Answer 1

You have to create a custom filter to form the value as mentioned by you.

var app = angular.module('myApp', []);
app.filter('map', function() {
  return function(input, propName) {
  var prop = propName.split("|");
  return input.map(function(item) {
  return item[prop[0]] +"|"+ item[prop[1]];
   });
  };
});

and then your input text as

<input type="text" value="{{(ctrl.items | map:'name|id').join(',')}}"/>

Please find the working Plnkr Working Plnkr