Skip to main content

AngularJs Interpolate Filter

This might be a simple angular filter, but more helpful to reduce ugly code in your controller.

Angular provides '$interpolate' service to evaluate angular expressions. 

Consider you have some constant template with some expression expecting a dynamic value - lets say userName.

Example:
//example.js
angular.module('app.example',[])
.constant('TEMPLATE',{
   WELCOME_MSG: 'Hi {{userName}} Welcome to our Portal'
})
.controller('sampleCtrl', function($scope, TEMPLATE, $interpolate){
   
   $scope.data = {
      userName:'Ajai'
   };

   $scope.MSG = $interpolate(TEMPLATE.WELCOME_MSG)($scope.data);
   
});


<!--example.html-->
<div ng-app="app.example" ng-controller="sampleCtrl">
<h1>{{MSG}}</h1>
</div>

Instead you can simplify the above one with custom interpolate filter. Below example wont make much difference, but consider if you have some 100 template constants - it is not a good idea to evaluate each template expression in controller. Instead we can achieve the same in template expression with simple filter.

angular.module('angular.filter.interpolate')
        .filter('interpolate', function ($interpolate) {
            return function (input, data) {
                return input?$interpolate(input)(data):'';
            };
        });

Example:
//example.js
angular.module('app.example',['angular.filter.interpolate'])
.constant('TEMPLATE',{
   WELCOME_MSG: 'Hi {{userName}} Welcome to our Portal'
})
.controller('sampleCtrl', function($scope, TEMPLATE, $interpolate){
   
   $scope.TEMPLATE = TEMPLATE;

   $scope.data = {
      userName:'Ajai'
   };
   
});
<!--example.html-->
<div ng-app="app.example" ng-controller="sampleCtrl">
    <!--Referring the model-->
    <h1>
      {{TEMPLATE.WELCOME_MSG | interpolate:data}}
    </h1>
    <!--With hardcoded value-->
    <h1>
      {{TEMPLATE.WELCOME_MSG | interpolate:{userName:'Ajai'} }}
    </h1>
</div>


Comments

Popular posts from this blog

RGB in C

Default palette size for normal graphics driver is 16 i.e) the color number rages from 0 to 15 To use rgb color modes we have to choose VGA or IBM 8514 as a graphics driver For VGA, Palette size is 16 i.e) color number ranges from 0-16 For IBM 8514, Palette size is 256 i.e) color number ranges from 0-255, we can also say it as VGA with 256 palette size By using setrgbpalette function we can generate RGB colors, we can generate colors with respect to Palette size. This function replaces the default palette colors with the generated Palette colors. Syntax: void setrgbpalette(int colornum, int red, int green, int blue); /* colornum - color number in palette (0-15 or 0-255 depens on graphics driver) red - color value for red (0-255) green - color value for green (0-255) blue - color value for blue (0-255) */ Example: #include<graphics.h> #include<stdio.h> #include<conio.h> #include<stdlib.h> #include<time.h> void main(){ int gd=VGA,

Simple Animation Using C

Here i have used fillpoly function to draw the object body and used fillellipse function to draw tier. animation is done by looping through the objects x & y position until user hits a key. Keypress event is achived  by using kbhit function. Smoothness of animation is controlled by delay function. Change the delay values to change the animation speed Source: #include<stdio.h> #include<conio.h> #include<graphics.h> #include<dos.h> void main() { int gd=DETECT,gm,i=-300,j; int poly[16]={100,100,250,100,250,50,300,50,325,90,325,140,100,140,100,100}; int tpoly[16]={100,100,250,100,250,50,300,50,325,90,325,140,100,140,100,100}; initgraph(&gd,&gm,""); getch(); while(!kbhit()) { for(j=0;j<16;j+=2) { poly[j]=tpoly[j]+i; } fillpoly(8,poly); setfillstyle(5,7); bar(275+i,60,295+i,85); setfillstyle(5,8); fillellipse(140+i,140,20,20); fillellipse(280+i,140,20,20); setfillstyle(1,0); fillellipse(140+i,140,10,10); fillellipse(280+i,140,10

Random Bouncing Ball Animation

Simple animation of random balls that bounces within the screen Source: #include<stdio.h> #include<graphics.h> #include<conio.h> #include<dos.h> #include<math.h> void drawBall(struct ball *b, int color); struct ball{ int x, y; int dx, dy; int radius; }; void main() { int gd=0, gm=VGAHI; int i; struct ball b[10]; initgraph(&gd, &gm, ""); for(i=1;i<=15;i++){ b[i].radius = rand()%20; b[i].x=rand()%getmaxx(); b[i].y=rand()%getmaxy(); b[i].dx=2; b[i].dy=4; } while(!kbhit()) { delay(5); cleardevice(); for(i=1;i<=15;i++) drawBall(&b[i],i); } closegraph(); } void drawBall(struct ball *b, int color){ setfillstyle(1,color); setcolor(color); fillellipse(b->x, b->y, b->radius, b->radius); if(b->x+b->radius > getmaxx() || b->x-b->radius<0) b->dx = -b->dx; if(b->y+b->radius > getmaxy() || b->y-b->radius<0) b->dy = -b->dy; b->x+=b-&g