angular: return array from object array properties - arrays

Question

I've got a 'user' object passed in when I load up a form, which I can use to directly populate my edit user form. So:
$scope.userData = getUserData();
<input id="uid" value="{{userData.uid}}"/>
<input id="name" value="{{userData.name}}"/>
My data looks like this:
userData = [{
"empId":1,
"name": "bob",
"roles":[{
"roleId":1,
"title":"boss"
},{
"roleId":2,
"title":"employee"
}]
}]
I've got a custom control that wants the roles as a FLAT array of titles.
So, this is what I'm hoping to produce:
<sys-multi id="roles" options="['boss','employee']"></sys-multi>
The trick here is that I'm hoping to do this IN THE TEMPLATE, so no functions so my controller. i.e. something like this (if it worked):
<sys-multi id="roles" options="{{userData.roles.name.join(',')}}"></sys-multi>
I've been playing with grep, but angular doesn't like grep within its {{}}'s.

Answer 1

How about adding a getter (or a function) to your userData object:
$scope.userData = {
"empId":1,
"name": "bob",
"roles":[{
"roleId":1,
"title":"boss"
},{
"roleId":2,
"title":"employee"
}],
get roleNames() {
return this.roles.map(function (role) {
return role.title;
});
}
};
...and then using it this way:
<sys-multi id="roles" options="userData.roleNames"></sys-multi>
http://codepen.io/jlowcs/pen/emPKrB