I have a grid with a 'type' column. The dataSource gives me the typeId which relates to data in another array. Based on the type, I want to display a font-awesome image along with the type name. I have the font-awesome class as a property of the object in the array. Now, obviously, I can use the text and value properties in the array of type objects to set the label, but how can I add the third property of the classes?
I currently have it hard-coded in the template as follows:
<
div
ng-if
=
"dataItem.typeId == 0"
class
=
"text-center"
>
<
i
class
=
"fa fa-map-pin fa-2x red"
aria-hidden
=
"true"
></
i
>
<
div
class
=
"bold"
>Reminder</
div
>
</
div
>
<
div
ng-if
=
"dataItem.typeId == 1"
class
=
"text-center"
>
<
i
class
=
"fa fa-exclamation-circle fa-2x red"
aria-hidden
=
"true"
></
i
>
<
div
class
=
"bold"
>Alert</
div
>
</
div
>
<div ....
However, that requires hard-coding the data values into the template instead of using what comes across in the data. Is there a way to do something like this where type would be some kind of reference to the array of types?
<
div
ng-bind="dataItem.typeId"
class
=
"text-center"
>
<
i
class
=
"{{type.image}}"
aria-hidden
=
"true"
></
i
>
<
div
class
=
"bold"
>{{type.text}}</
div
>
</
div
>
Thanks!