"AngularJS method" for displaying values ​​for output in a view

Question

I am looking for advice on a beginner problem with AngularJS:

In my application, there are many cases where the API with which it works gives a value from a list of possible types, I pulled the value into my model, and then I want to map it to something, for example, icons for each type. Since I will most likely be reusing the mapping of some of these common types quite often, what is a good way to do this, which is efficient and allows reuse?

I try to keep it “DRY” and stick to “Separation of problems”, so the display logic is as different as possible from the model.

I know that the “good” is subjective, but hopefully people get this idea here ...

It seems to me that this is a fairly common scenario, but some tangible examples:

i. When working with files, I get the file type, and I want to match it so that a specific image based on the type is displayed. In a file app, this is likely to appear in many places.

ii. Weather application - it will tell you the type of weather, and then want to display a specific weather icon (again, in many places throughout the application).

---

I am new to AngularJS, but I read the problem a bit, but I don’t know what is the best way to proceed, given the number of possible ways to solve it - I assume it could be:

a. Create your own filter so that I can reuse it in different places in the expressions where I put the values ​​from the model

b. ( , , , , , "" - "" , 3, 3 .. ..)

, ?

,

Neil

Answer 1

/ ,

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

,

•     {{File.name}} 

css, :

.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');
 }

,

 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);
            }
      }
 })

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

      }
 })

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