Simer Simer - 5 months ago 23
AngularJS Question

Using django filter and tags with angular expressions

<img style="width: 40px; height: 39px" class="img-responsive" src="/static{{user.avatar|cut:"abc/static" }}" alt="{{ user.first_name }}">


The requirement of "cut" filter in the code above is because I get "abc/static/abc/uploads/profileimages/images_3.jpg" in user avatar(from django view) and I want to change to "/static/abc/uploads/profileimages/images_3.jpg" hence used this -
/static{{user.avatar|cut:"abc/static" }}


As cut filter is used in above code I need to use it in below code also but here I receive data from angular and cannot combine django "cut" with it:

<img ng-if="notif ==1 " class="user-img" src="/static{$ notif.about_user_image $}" alt="{$ notif.firstname $}">


Is it possible to use such django filters or tag in combination of angular?

Answer

[...] but here I receive data from angular and cannot combine django "cut" with it

Is it possible to use such django filters or tag in combination of angular?

If you're thinking of passing a value from AngularJS to a Django filter that's not going to be possible, Django filter is ran server side before AngularJS even gets to execute on the browser.

If this is to be done when the data is loaded on the browser, then you'll want an AngularJS filter, below I assume default {{ token, use your custom {$ token if you want:

<img ng-src="{{ notif.about_user_image | processImageUrl }}" />

Please note the ng-src instead of src

Then you define a filter, e.g.

app.filter('processImageUrl', function() {
  return function(url) {
    return url.replace('abc/static/abc', '/static/mbp');
  };
})