"AngularJS way" to map values for output in a view

Question

Am seeking advice on a beginner problem with AngularJS:

My app has lots of cases where the API it's working with gives a value from a list of possible types, I've pulled the value into my model and then I want to map it to something, eg icons for each type. As I'm likely to be re-using the mapping of a few of these common types quite frequently, what's a good way to do this that is efficient and allows re-use?

I'm trying to keep it "DRY" and stick to the "Separation of concerns" so the display logic is as separate from the model as possible.

I know "good" is subjective, but hopefully people get the idea here...

This seems to me to be a fairly common scenario, but some tangible examples are:

i. Working with files, I get the file type and I want to map it so that a specific picture based on the type shows up. In an app dealing with files, this would likely come up in lots of places.

ii. A weather app - would be told the weather type and then wish to display a particular weather icon (again in lots of places throughout the app)

---

I'm fairly new to AngularJS but I've read around the problem a bit but am unsure how best to proceed given the number of possible ways one might solve it - I'm guessing it could be either:

a. Make my own filter, so that I can re-use that in various places within the expressions where I put the values from the model

b. Make my own directive (not so clear on this, but my understanding is I could make a directive for a specific purpose, eg if I wanted my "type" to represent a something such as a "stars" counter and feeding in a value like 3 causes it to display 3 stars etc etc)

Any advice or recommendations on where I might find good example code?

Many thanks,

Neil

Answer 1

model to icons/images is fairly simple manner lets say you have a list of files

$scope.files=[
    {
        name:"file name",
        type:'pdf'
    },
    {
        name:"file name2",
        type:'doc'
    }
]

then lets say you have a list of documents

{{file.name}}

then youll have a css stating:

.icon-file{
    width:20px;
    height:20px;
    display:inlie-block;
    background-repeat:no-repeat;
    background-position:center center;
}

.icon-file.pdf{
    background-image:url('path/to/pdf.png');
 }

.icon-file.doc{
    background-image:url('path/to/doc.png');
 }

as a directive, no isolated scope

 angularApp.directive('file',function(){
     return {
           restrict:'AE',
           replace:false,
           template:'<i class="icon-file"></i><span></span>',
           link:function(scope,element,attrs){
                  element.find('li').addClass(attrs.type);
                  element.find('span').text(attrs.name);
            }
      }
 })

as a directive, with isolated scope

 angularApp.directive('file',function(){
     return {
           restrict:'AE',
           replace:false,
           scope:{
                type:"@type",
                name:"@name"
            },
           template:'<i class="icon-file {{type}}"></i><span>{{name}}</span>',

      }
 })

directive usage

 <file_type name="file_name" type="type"></file_type>